z-index 是用于控制 HTML 元素的叠放顺序的 CSS 属性。高 z-index 值的元素会覆盖低 z-index 值的元素，但它只有在特定条件下才生效。以下是使用 z-index 的一些要求和注意事项：
-
元素必须是定位元素：
z-index只对具有定位属性的元素生效（position: relative、position: absolute、position: fixed或position: sticky）。如果元素没有设置这些定位属性，z-index不会对其产生效果。 -
数值和堆叠顺序：
z-index可以为正值、负值或零。数值越大，元素越靠前。数值相同时，后面定义的元素会覆盖前面的元素。 -
父子关系影响：
z-index是相对上下文层次结构的。例如，如果一个元素有z-index: 10，但它的父元素有z-index: 5，那么它的叠放顺序会受到父元素的限制，而无法覆盖另一个z-index: 6的父元素。 -
层叠上下文（Stacking Context）：一些特定的 CSS 属性会创建新的层叠上下文，例如
opacity（不为 1）、transform、filter、flex或grid等。当这些属性被设置时，元素会创建一个新的层叠上下文，而其中的z-index只在这个局部范围内生效，无法影响外部上下文中的元素。 -
负值：带有负
z-index的元素会被放置在父元素的后面，但仍在其层叠上下文之内，适合用于背景效果等情况。
使用 z-index 的最佳实践：
- 尽量减少
z-index的使用，避免复杂的叠放顺序，保持代码清晰。 - 避免使用过大的
z-index值，比如 999 或 9999，因为这会使得布局管理复杂。 - 控制好层叠上下文的创建，必要时将关键元素放入新的层叠上下文以避免干扰。
通过合理使用 z-index 和层叠上下文，可以更灵活地控制页面元素的叠放顺序，提升页面的可维护性和结构清晰度。