★文章内容学习来源：拉勾教育大前端就业集训营

接上篇，本篇 • 定位应用 • 压盖顺序

五、定位应用

  • 定位position根据属性值不同有三种类型的定位效果，其中绝对定位和固定定位的元素会脱离标准流。 三种定位在页面中有各自的使用场景。
1. 压盖效果

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

2.居中定位的元素
  • 如果想在参考元素中居中显示，有自己的居中方法：

①在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。 百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度、高度。

position: absolute;
left: 50%;

②给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半。

position: absolute; 
left: 50%; 
width: 100px; 
margin-left: -50px;

注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置。

3.扩展应用
  • 解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中；
  • 浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。

六、 压盖顺序

实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的。

1.默认压盖顺序:
定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。
如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位。
因此，书写代码时，需要注意压盖效果，必须合理设置 HTML 元素的书写顺序。

2.自定义压盖顺序:
如果想更改定位的元素的压盖顺序，可以设置一个 z-index 属性。 属性值：数字。

3.自定义压盖顺序注意事项 :
①属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
②如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
③z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：
(1)父级盒子：
如果不设置z-index，后写的压盖先写的；
如果设置了z-index，值大的压盖值小的。
(2)子级盒子：
如果父级没有设置z-index属性，子级z-index大的会压盖小的；
如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。

下篇继续【34】CSS3（1）—— 新增选择器①子级选择器