CSS 中重要的层叠概念详解

最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的资料，解决了这个问题，这里记录一下~

屏幕是一个二维平面，然而HTML元素却是排列在三维坐标系中，x为水平位置，y为垂直位置，z为屏幕由内向外方向的位置，我们在看屏幕的时候是沿着z轴方向从外向内的；由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖；

那么这里有几个重要的概念： 层叠上下文 (堆叠上下文, Stacking Context)、 层叠等级 (层叠水平, Stacking Level)、 层叠顺序 (层叠次序, 堆叠顺序, Stacking Order)、 z-index

声明：

• 以下定位元素指的是  position:absolute|fixed|relative|sticky
• 以下非定位元素指的是  position:initial|static
• 关于层叠上下文还有一个类似的概念： 块级格式化上下文 (BFC, Block Formatting Context)，可以参考一下 CSS 中重要的BFC，其中还介绍了一些文档流的内容；
• 本文蛮长的，但是如果你有勇气看完，那应该对层叠有关概念就基本掌握了 (～o￣

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！