元素之间的覆盖以及层级

元素之间的覆盖以及层级

一.父子元素之间的覆盖

子元素覆盖父元素

二.兄弟元素之间的覆盖

1.只有一个元素使用了定位

若一个元素设置了定位，那么会它的层级会提升，所以会覆盖其他兄弟元素（假设它的兄弟元素没有使用定位）

---

2.多个兄弟元素使用了定位

A.默认情况

如果互为兄弟的元素都使用了定位，那么在HTML中写在下面的兄弟元素会覆盖上面的兄弟元素

B.通过z-index属性修改元素层级

z-index接收一个正整数，表示层级，层级高的兄弟元素会覆盖层级低的兄弟元素。

注意：只有position不为static时，z-index才会生效；否则，会忽略这个属性

通过设置z-index，可以使得多个设置了定位的元素不再通过HTML中的顺序来确定覆盖的结果