定位元素，元素层级

定位元素

相对于浮动元素，定位元素更加灵活。

设置定位元素

使用position属性来设置元素的定义
可选值：

• static 默认值 没有开启定位
• relative 开启相对定位
• absolute 开启绝对定位
• fixed 开启固定定位

相对定位元素的特点

1. 元素不会脱离文档流
2. 相对于该元素在文档流中的原位置进行定位的。
3. 相对定位会使元素提升一个层级
4. 相对定位不会改变元素的性质，块还是块元素，行内还是行内元素

绝对定位元素的特点

1. 元素会完全脱离文档流
2. 绝对定位会改变元素的性质，这个性质符合元素脱离文档流的性质。
3. 开启绝对定位的元素在没有设置偏移量的情况下，元素位置不会发生变化
4. 绝对定位元素相对于离它最近的开启了定位的祖先元素进行定位。如果所有祖先元素没有开启定位，那么它相对于初始包含块（html）进行定位。一般情况下，我们为一个元素开启绝对定位，同时也会为它的父元素开启相对定位
5. 绝对定位会使元素提升一个层级

固定定位元素的特点

• 固定定位元素大部分特点与绝对定位元素一样
• 不同的是固定元素总是相对与浏览器可视窗口进行定位的，并且元素会固定在网页的视口上，不会随网页滚动而发生位置改变。

绝对定位元素的对齐方式

定位元素必须满足水平和垂直方向等式。
绝对定位元素水平方向布局等式
left + margin-left + padding-left + border-left + width + padding-rigth + boder-rigth + margin-right + rigth = 包含快的width
此时就有了5个值可以设置为auto ：

• left
• rigth
• margin- left
• margin- right
• width

定位元素的水平居中：

• 定位元素不设置left和rigth默认值是auto，它会根据元素本来的位置进行偏移设置，使在不影响元素位置的情况下让等式成立。
• 如果想让定位元素居中显示，需要将margin-left和margin-right设置为auto，但是浏览器无法计算这两个外边距的值，需要将left和rigth设置为0，为了让等式成立，浏览器会将剩余的外边距平均划分给marign-left和margin-rigth;
• 定位元素垂直居中和水平居中一样必须满足等式

元素层级

开启定位元素都会提升一个层级，定位元素可以通过z-index来设置元素层级

z-index需要一个整数来作为参数，值越大层级越高

如果层级相同，在结构上后面的元素会覆盖前面的元素
注意：父元素层级再高，也不会覆盖子元素。