CSS之 Position(定位)

一、定位组成

position属性指定了元素的定位类型。

• 定位：定位模式和边偏移组成

1、定位模式

决定元素的定位方式，通过position属性设置，其值有：

• static:静态定位（不能使用边偏移）
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位
• sticky：粘性定位（兼容性差，ie不支持）

2、边偏移

• 决定元素的最终位置，有：

方向	描述
top	顶端偏移量，即相对与父元素的上边框的距离
bottom	底部偏移量
left	左侧偏移量
right	右侧偏移量

二、静态定位（不能使用边偏移）

元素的默认定位，无定位的意思。

三、相对定位（relative）

元素在移动的位置的时候相对于它原来的位置

特点：

• 移动位置的时候是相对于它原来的位置
• 不脱标，继续保留原来的位置
• 在实际开发中主要是限制绝对定位
• 语法：

  position:relative;

四、绝对定位（absolute）

元素在移动的时候，相对于祖先元素来说的

特点：

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为标准去定位。
• 如果祖先元素有定位，则以最近一级定位为参考点去移动位置。
• 不再占有原先的位置，脱标。
• 语法：

  position:absolute;

“子绝父相”

• 子级使用绝对定位（不占有原来的位置，随意摆放），父级使用相对定位（限制其子盒子的位置，会占有原来的位置）。

绝对定位“居中算法”（实现水平和垂直居中）

• left：50%；

  让绝对定位的盒子向左侧移动到父级元素的水平中心位置

• margin-left：自身宽度的一半；

  让盒子向左移动到自身盒子的一半宽度

五、固定定位

固定于可视区的某个位置（即浏览器的滚动页面，但元素位置不变）。

特点：

• 以浏览器可视区域为参考点（与父元素没有任何关系，不随滚动条移动）
• 不占有原来的位置，脱标，可以看作是一种特殊的绝对定位
• 语法：

  position:fixed;

技巧：固定在版心的右侧位置

• 让固定定位的盒子

  left：50%

  ，走到浏览器（可视区或者版心）的一半位置
• 再让固定定位的盒子

  margin-left：版心宽度的一半距离；

六、粘性定位（兼容性差，ie不支持）

• 可以看作是固定定位与相对定位的混合
• 语法：

  position:stickly;

特点：

• 以浏览器可视窗口为参考点，移动元素
• 占有原先的位置
• 必须添加top、bottom、left、right中的任何一个值才有效，否则就当作相对定位来看

七、定位的叠放次序和拓展

1、z-index

• 使用

  z-index

  来控制盒子的前后次序

• z-index：1；

  参数可以是正整数、0、负整数，数值越大越优先，默认值是

  auto

  。
• 若数值相同，则按书写的前后顺序，后来者居上。
• 数字后面不能加单位。
• 之有定位的盒子有此属性。

2、拓展

（1）定位的特殊性

• 绝对定位和固定定位与浮动类似
• 行类元素添加绝对定位或者固定定位可以直接设置高度与宽度
• 块级元素添加绝对定位或者固定定位，如果不给宽度与高度，则默认是内容的大小

（2）浮动元素不会压住标准流的文字定位

• 浮动元素不会压住标准流的文字定位
• 绝对定位或者固定定位会压住下面所有的内容