定位

定位是一种更加高级的布局手段，通过position属性可以将元素放置在页面的任意位置。

position可以设置以下值：

• static 默认值，元素是静止的，没有开启定位。
• relative 相对定位
• absolute 绝对定位
• fixed 固定定位
• sticky 粘滞定位

元素开启定位后，需要配合offset属性实现位置变化，offset有点类似于margin，可以具体设置上下左右（top/bottom/left/right）四个方向的值，值代表定位元素和参照物的距离，不同定位方式的参照物是不同的。offset的默认值是auto，所以如果不设置offset的值，元素的位置不会发生变化。

相对定位

当元素的position属性值为relative时，则开启了元素的相对定位，相对定位是参照元素在文档流中的位置进行定位的。

相对定位会提升元素的层级，但不会使元素脱离文档流，也不会改变元素的性质。

绝对定位

当元素的position属性值为absolute时，则开启了元素的绝对定位。绝对定位是参照包含块的位置进行定位的。

包含块（containing block） ，通常包含块就是离当前元素最近的祖先元素，也就是父级元素。

绝对定位中的包含块是离当前元素最近的开启定位的祖先元素，如果所有祖先元素都没有开启定位，那此时包含块就是根元素（html）。

绝对定位会提升元素的层级，并且会使元素脱离文档流，同时会改变元素的性质。

还要注意的是开启绝对定位后，元素水平布局等式需要添加left和right两个值。

• 当过度约束时，如果9个值中没有auto则会自动调整right值以使等式成立。
• 如果width/margin/left/right有auto值，则自动调整auto值。

优先级是width > right > left > margin-right = margin-left。

并且垂直方向布局的等式也必须满足，这意味着在绝对定位的情况下，可以使元素水平垂直双居中。

固定定位

当元素的position属性值为fixed时，则开启了元素的固定定位（也是一种绝对定位），固定定位是参照浏览器视口的位置进行定位的。

粘滞定位

当元素的position属性值为sticky时，则开启了元素的粘滞定位，特性和相对定位基本一样，不同点在于粘滞定位可以让元素到达某个位置时固定。

元素的层级

之前我们在定位中说到提升元素的层级，那么这里就介绍一下什么是元素的层级。以下代码可以看出网页是存在Z轴的，元素一层一层叠在一起。

对于开启定位的元素，可以通过z-index属性设置元素的层级，z-index的值必须是一个整数，值越大元素层级越高，元素层级越高就越优先显示。

如果元素层级一样，则优先显示HTML结构靠下的元素，所以下图的显示优先级高低是box3 > box2 > box1。

注意祖先元素永远不会盖住后代元素，无论层级多高。

        body {
            font-size: 60px;
        }

        div {
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: #bfa;
        }

        .box2 {
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: orange;
        }

        .box3 {
            position: absolute;
            top: 100px;
            left: 100px;
            background-color: yellow;
        }