在网页制作的过程中,元素与元素之间的位置关系,在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚,而 Z 轴 则相对较为模糊,或者说不能全面的理解Z轴的显示逻辑。大多数人都知道可以使用 position
属性配合 z-index
属性解决元素的 Z 轴显示问题,对于更深层次的原理却不太了解。本文主要介绍了层叠上下文、层叠等级、层叠顺序等概念。目的就是为了理清元素的 Z 轴显示顺序的内部逻辑。
一、现象
Z 轴上的显示顺序
// 穿透父级容器的 z-index
<!-- 100 * 100 的深蓝色 Block -->
<div class="block blue" style="position: relative; z-index: auto;">
<!-- 50 * 50 的红色 Block -->
<div class="small red" style="position: relative; z-index: -1;"></div>
</div>
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)