CSS定位

1. 为什么需要定位？

有些场景，使用标准流和浮动都没办法实现。比如：

• 某个元素可以随意在一个盒子内移动位置，并且压住其他盒子。
• 滚动窗口的时候，盒子是固定在某个位置的。

2 定位是什么？

• 定位组成：定位 = 定位模式 + 边偏移

• 定位特性：

  1. 绝对定位和固定定位和浮动类似

     • 行内元素添加绝对定位或固定定位，可以直接设置宽度和高度
     • 块级元素添加绝对定位或固定定位，如果没有设置宽度和高度，默认大小是内容的大小。

  2. 绝对定位和固定定位会压住它下面标准流的盒子

2.1 定位模式

定位模式，决定元素的定位方式，通过CSS的position属性来设置，分为4种：

2.2 边偏移

边偏移，决定元素的最终位置，有top,bottom,left,right 4个属性

3 定位方式

3.1 静态定位

• 定义：静态定位是元素的默认定位方式，即无定位。
• 语法：{position： static}
• 特点：
  • 按照标准流的特性，没有位偏移
• 应用：
  • 静态定位在布局时很少用到

3.2 相对定位

• 定义： 相对定位是元素在移动位置的时候，相对它原来的位置来说的。
• 语法 ：{position： relative}
• 特点：
  • 移动的位置是参照自己原先的位置
  • 不脱标，继续保留原来的位置
• 应用：
  • 给决定定位当爹

3.3 绝对定位

• 定义：绝对定位是元素在移动位置的时候，相对它祖辈元素的位置来说的。
• 语法：{position： absolute}
• 特点：
  • 如果没有祖先元素，或祖先元素没有定位，则以浏览器为准定位（Document文档）
  • 如果祖先元素有定位（相对，绝对，固定定位），则以最近一级有定位的祖先元素，为参考点移动位置。
  • 绝对定位不再占有原先的位置（脱标）

子绝父相的由来

• 意思是：子级是绝对定位的话，父级要是相对定位
• 理由：
  • 父级需要占有位置，所以是相对定位
  • 子级需要不占有位置，并且可以放到父盒子的任意一个地方。所以是绝对定位。

3.4 固定定位

• 定义：固定定位是元素固定于浏览器的可视区的位置
• 语法：{position： fixed}
• 特点：
  • 以浏览器的可视窗口为参照点移动元素
  • 浏览器滚动时，元素的位置不会改变
  • 跟父元素没有关系
  • 不占有原先的位置（脱标）

固定定位可以看做是一种特殊的绝对定位

3.5 粘性定位

• 定义：粘性定位可以看做相对定位和固定定位的混合。一般跟页面滚动条搭配使用
• 语法：{position： sticky; top: 10px}（刚开始随滚动条滚动，等到达了距距离浏览器可视窗口上方的10px后，就固定在了窗口上）
• 特点：
  • 以浏览器的可视窗口为参照点移动元素
  • 不脱标，继续保留原来的位置
  • 必须添加top，left, right， bottom中的一个才有效
  • 兼容性差，不支持IE

4 定位叠放次序

• 定义： 使用定位布局时，可能会出现盒子的重叠情况。此时，使用z-index 来设置叠放次序
• 语法：{z-index: 1}
• 特点：
  • 数值可以是正整数、负整数、0，默认是auto
  • 数值越大，盒子越靠上
  • 数字后面不能加单位
  • 只有定位的盒子才能有z-index属性

5 绝对定位盒子居中

• 加了绝对定位的盒子不能通过margin: 0 auto水平居中，但是可以通过以下计算方法实现居中。
  1. left: 50%: 让盒子的左侧移动父容器宽度的一半
  2. margin-left: -0.5*自身宽度 px: 让盒子向左移动自身盒子宽度的一般