position定位：相对定位、绝对定位、固定定位、粘滞定位

定位

• 定位是一种高级的布局手段
• 通过定位可以将元素摆放在页面的任意位置
• 使用position属性来设置定位
• 可选值：
  – static 默认值 元素是静止的没有开启定位
  – relative 开启元素的相对定位
  – absolute 开启元素的绝对定位
  – fixed 开启元素的固定定位
  – sticky 开启元素的粘滞定位

偏移量（offset）

• 当元素开启了定位以后，可以通过偏移量来设置元素的定位
  – top
  定位元素和定位位置上边框的位置
  – bottom
  定位元素和定位位置下边框的位置
• 定位元素垂直方向的位置由 top 和 bottom 两个属性决定，通常二选一。
  – left
  定位元素和定位位置左边框的位置
  – right
  定位元素和定位位置右边框的位置
• 定位元素水平方向的位置由 left 和 right 两个属性决定，通常二选一。

相对定位

• 当元素的position属性值设置为relative时则开启元素的相对定位
• 相对定位的特点：
  – 1、元素开启相对定位以后，如果不设置偏移量元素不会发生任何改变。
  – 2、相对定位时参照于元素在文档流中的位置
  – 3、相对定位会提升元素的层级，会高于文档流中的元素
  – 4、相对定位不会使元素拖离文档流
  – 5、相对定位不会改变元素的性质（块依旧是块，行内依旧是行内）
  原位置依旧独占一行
  

绝对定位（常用）

• 当元素的position属性值设置为absolute时，则开启元素的绝对定位
• 绝对定位的特点：
  – 1、开启绝对定位以后，如果不设置偏移量元素，元素的位置不会发生变化
  – 2、开启绝对定位后，元素从文档流中脱离
  – 3、绝对定位会改变元素的性质，行内变成块，块的高度被内容撑开
  
  – 4、绝对定位会使元素提升一个层级

包含块（containing block）

• 正常情况下：
  – 包含块就是离当前元素最近的祖先块元素
• 绝对定位的包含块：
  – 离它最近的开启了定位的祖先块元素
  – 如果所有的祖先元素都没有开启，则相对于根元素定位
• html（根元素，初始包含块）

绝对定位元素的布局

• 水平布局
• left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
  当开启了绝对定位：
  – 水平方向的布局等式就需要添加 left 和 right 两个值：
  –此时规则与之前的一样，只是多了两个值
  – 规则如下：

如果9个值中没有auto，且发生了过度约束（9个值相加不能满足等式）时，会自动调整 right 的值以达到等式成立。
如果 有auto ，则自动调整auto的值以使等式成立
可设置auto的值：margin 、width 、left、right
因为left 和right 值的默认值为auto，所以如果不指定 left 和 right 的值，等式不满足时，会自动修正这两个值。

• 垂直布局
• 垂直方向的等式也必须满足
  top+ margin-top+ border-top+ padding-top+ width + padding-bottom+ border-bottom+ margin-bottom+ bottom= 包含块的内容区的高度
  

固定定位

• 将元素的position属性设置为 fixed 则开启了元素的固定定位
• 固定定位也是一种绝对定位，所以固定定位大部分特点与绝对定位一样
• 唯一不同的是，固定定位永远参考与浏览器的视口（可视区域）进行定位。
• 固定定位的元素不会随网页的滚动条滚动
  

粘滞定位

• 当元素的position属性设置为sticky时，则开启了元素的粘滞定位
• 粘滞定位和相对定位的特点基本一致
• 不同的是粘滞定位可以在元素到达某个位置时将其固定
  

元素的层级

• 当开启了定位元素，可以通过z-index 属性来指定元素的层级
• z-index 需要一个整数作为参数，值越大元素的层级越高
• 元素的层级越高越优先显示靠下的元素
  
• 祖先元素的层级再高也不会盖住后代元素