HTML+CSS要点6：position定位与层级关系

1 层级z-index

同级元素情况

1. 定位会提高层级，除了static
2. 后面的定位元素层级，高于前面的定位元素层级

嵌套元素情况

1. 子级的层级高于父级的层级
2. 改变层级的属性：z-index: 1; 默认：0；

特性：

• 只能加给定位元素
• 数值越大层级越高，可以接受负数
• 建议同级元素之间比较层级

2 包含块的概念和作用( 包含块就是定位父级 )

• 包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；
• 默认状态下，docment是一个大的包含块，所有绝对定位的元素都是根据根元素来定自己所处的位置和百分比大小的显示的。

3 position定位

• 属性书写：
  position: static / relative / absolute / fixed;

相对定位

position: relative; 相对定位
1，不影响元素本身的特性；
2，不会让元素脱离文档流 （元素移动后，原始位置会被保留）
3，如果没有定位偏移量，对元素本身没有任何影响；
4，提升层级（高于浮动元素）
5，可以利用 top、bottom、left、right设置偏移值

相对定位元素的偏移量是相对于它自身原来的位置

绝对定位

position: absolute; 绝对定位

1. 如果不设定任何偏移值,元素位置不会有任何改变(后面的就不一定了)；
2. 让元素完全脱离文档流 （不会对文档流里的元素造成布局上的影响）
3. 让内联元素支持宽高
4. 不设置宽度的时候，宽度由内容撑开
5. 提升层级（高于浮动元素）
6. 如果有定位父级，则相对于定位父级发生位移，如果没有则相对于document发证位移
7. 触发BFC

注意：

• 相对定位一般来说是配合绝对定位使用的, 子绝父相
• 定位元素的宽高百分比，是根据定位父级来计算

得到一个和可视区一样大小的元素

html、body默认是没有高度的，百分比是根据父级来进行计算的，所以需要给html、body的高度都设置为100%才可以

3.3 固定定位

固定定位的特性和绝对定位基本一致，不同的是，固定定位始终相对于document发生偏移，并且会固定在屏幕中

3.4 粘性定位

position: sticky

4 盒子垂直居中的方法

1

粉色盒子大小是100*100，给粉色盒子添加绝对定位，距离左边和上边50%的位置，在让盒子向左移动盒子宽度的一半，向上移动盒子高度的一半。

2

            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;