(二十二)定位02

绝对定位（继续）

1.如果祖先级中有定位的元素，就不参考body
2.参考的是祖先元素中有任意定位的，在html结构中距离目标最近的祖先
3.根据绝对定位的参考元素不同，有三种定位组合方式：子绝父相 子绝父绝 子绝父固 ，由于相对定位的祖先级位置更稳定，大多使用子觉父相的情况

固定定位

1.属性值：fixed
2.参考元素：浏览器窗口
3.参考点：浏览器窗口的四个顶点，跟偏移量组合方向有关
4.由于浏览器的四个顶点不会发生变化，会导致固定定位的元素会始终显示在定位位置
5.固定定位的特性：
（1）固定定位的元素脱离标准流，会让出自己原来的位置
（2）可以设置宽高
（3）根据偏移量属性可以任意设置在浏览器窗口的位置
（4）固定定位的元素会始终显示在浏览器窗口上

定位应用——压盖效果

1.所有定位方式都可以实现压盖效果
2.由于绝对定位的元素脱离标准，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定制的压盖

定位应用——居中

1.场景：定位的元素，想要在参考元素中居中显示
2.在居中的方向使用一个偏移量属性，例如left 设置属性值为50%，导致图片的作顶点移动到参考元素的中心位置
3.再给这个盒子设置一个同方向的margin-left 属性值为负的 自身宽度的一半
4.利用以上方法还可以解决在普通标准流中 大盒子在小盒子中的居中效果

定位压盖设置 z-index

1.实际使用定位时，可能出现国歌定位的元素加载到同一个位置的情况，这时候压盖的顺序时可以控制的
2.默认情况下，html中先后书写的定位压盖先写的定位
3.可以通过z-index属性设置压盖顺序，z-index数字越大的盒子会压盖z-index数字越小的
4.z-index只能设置给定位元素才会生效，如果给没有定位的元素设置，不会生效