如何使用z-index

Z-index 是一个 CSS 属性，用于控制元素在层叠上下文中（ stacking context ）中的堆叠顺序。在网页布局中，尤其当涉及多个重叠的定位元素（如绝对定位或相对定位）时，z-index 就显得尤为重要。

**如何使用 z-index：**

1. **定义堆叠上下文：**
- position属性影响堆叠上下文，`position: relative;`, `absolute;`, `fixed;`, 和 `sticky;`会创建一个新的堆叠上下文。
- 当没有其他规则指定时，块级元素默认形成一个堆叠上下文，行内元素则不会。

2. **设置 z-index 值：**
- 对于每个元素，你可以为它的 `.style.zIndex = value;` 设置一个整数值，其中较大的值将放置在前面（更高）。负值也可以用，但通常不推荐，因为浏览器可能会有一些特殊处理。

3. **注意父子关系：**
- 如果父元素设置了 `z-index` 并且不是 `auto` 或者 `0`，那么子元素会继承这个值，除非子元素明确地覆盖它。

4. **层叠顺序：**
- 具有 `z-index` 的元素总是位于其同辈元素的上方，即使它们原本是在视觉上后面的。
- `position: fixed;` 和 `position: absolute;` 的元素相对于视口具有最高优先级。
- 浮动元素和未定位的元素按文档流排序。

5. **默认行为：**
- 内部浮动元素、外边距盒和边框盒会根据文档流的先后顺序叠加。
- `position: static;` 或者 `display: inline;` 的元素不受 z-index 影响。

6. **层叠层级：**
- `z-index: auto` 表示遵循正常的堆叠顺序，通常会按照元素在HTML文档中的顺序排列。
- `z-index: 0` 不会影响堆叠顺序，除非其他地方有更具体的设置。

**相关问题--:**
1. 如何解决两个具有相同 z-index 的元素重叠的问题？
2. 在哪些情况下z-index可能不起作用？
3. 如何避免z-index引发的瀑布效应？