z-index理解

当网页上出现多个由绝对定位（position:absolute）或固定定位（position:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。

z-index的意思就是在z轴的顺序，如果说网页是由x轴和y轴所决定的一个平面，那么z轴就是垂直于屏幕的一条虚拟坐标轴，浮动层就在这个坐标轴上，那么它们的顺序号就决定了谁上谁下了。

参考：

• 关于z-index 那些你不知道的事：https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
• MDN[z-index]： https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index

我们平时的元素顺序，布局（标准文档流，浮动，定位），背景颜色，等属性，本来就存在层级关系，把基本的层级关系掌握好，再去用 z-index 你会发现很少用到。
张鑫旭也提出过一个“不二原则”，就是说除了弹窗这种布局元素外，其他的文档布局里面，z-index 最好不要超过2，超过了，就说明你的基本功不行。

https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

我答到那道题目了。。。

层叠

z-index 可以想象成是一根垂直于屏幕的轴，或者说类似 Photoshop 中图层的概念。z-index 越大，越靠近用户，同时也会覆盖底下的内容。需要注意的是，z-index 只对于同类型的元素有效。可以参考 Day 20 的解答--请描述 HTML 元素的显示优先级

就是Z轴的方向的位置，值越大离屏幕前的你越近，反之亦然。可以为负数

层叠
就是Z轴的方向的位置，值越大离屏幕前的你越近，反之亦然。可以为负数

z-index设置元素的堆叠顺序

z-index是CSS属性，用于控制元素在层叠上下文中的堆叠顺序。它决定了元素在垂直方向上的显示顺序，即哪个元素在上方、哪个元素在下方。

z-index属性接受一个整数值作为参数，数值越大表示元素在层叠上下文中的层级越高，即越靠近用户。默认情况下，元素的z-index值是auto，表示它们按照它们在HTML文档中出现的顺序进行层叠。

要使用z-index属性，元素必须具有定位（position）属性，如relative、absolute或fixed。只有具有定位属性的元素才能在层叠上下文中进行堆叠。

当多个元素重叠时，可以通过设置z-index来控制它们的显示顺序。较高的z-index值会使元素显示在较低的z-index值元素的上方。但需要注意，z-index只能在同一层叠上下文中进行比较，不同层叠上下文的元素无法相互影响。

在使用z-index时，一些常见的注意事项包括：

1. z-index只在具有定位属性的元素上生效。
2. z-index值仅在同一层叠上下文中进行比较。
3. z-index值可以是负数。
4. 设置z-index的元素必须有足够的空间来容纳其他元素，否则z-index将不起作用。

通过合理使用z-index属性，可以控制元素的层叠顺序，实现更复杂的页面布局和视觉效果。