姐妹们！别再说你不会CSS了！z-index 和 index 帮你实现“谁上谁下”的魔法！ ✨
最近在做网页设计，遇到一个超级头疼的页面上的元素互相重叠，怎么弄都弄不好！😭 后来，终于摸索出了两个神器：z-index 和 index，简直是网页排版的“魔法师”！🪄
什么是 z-index？
简单来说，z-index 就是用来控制元素在 Z 轴方向上的层级，也就是谁在最上面、谁在最下面。
想象一下，我们把网页看成一个三维空间，z-index 就相当于在决定哪个元素离我们更近，哪个元素离我们更远。
如何使用 z-index？
1. 我们要设置元素的 position 属性，比如 relative、absolute、fixed 等等。
2. 然后，给元素添加 z-index 属性，并赋予一个数值。数值越大，元素在 Z 轴上的层级越高，就越靠近我们。
举个例子：
比如，我想让一个图片悬浮在文字之上，就可以给图片设置 z-index 为 10，给文字设置 z-index 为 1，这样图片就会显示在文字上面啦！
z-index 的小技巧：
z-index 可以是正数、负数或 0。默认值为 0，如果多个元素的 z-index 都为 0，那么它们会按照在 HTML 代码中的顺序进行排序。
可以使用 z-index 来实现一些有趣的视觉效果，比如悬浮按钮、弹窗等等。
除了 z-index，还有 index？
没错！index 也是一个很有用的属性，不过它只适用于 display: flex 的容器。
index 的作用和 z-index 类似，都是用来控制元素的层级，不过 index 只适用于 display: flex 的容器，且数值越大，元素就越靠前。
总结一下：
z-index 控制元素在 Z 轴方向上的层级，适用于所有元素。
index 控制元素在 flex 容器内的层级，只适用于 display: flex 的容器。
姐妹们！学会了 z-index 和 index，网页排版不再是难题！😄 快去试试吧！
你最喜欢用哪种方法来控制元素的层级呢？ 评论区分享一下你的经验吧！ 👇