z-index层级怎么可以设置高过fixed案例

在CSS中，`z-index` 属性用于控制元素的堆叠顺序，即在页面上哪个元素会出现在前面。如果想要让一个非固定定位(`position`不是`fixed`)的元素层级高于一个已设为 `fixed` 的元素，你可以采取以下几种策略：

1. **直接设置更高的 z-index**：给需要覆盖的元素添加一个较高的 `z-index` 值。但需要注意的是，`z-index` 只对相对定位 (`position: relative;`)、绝对定位 (`position: absolute;`) 或者固定的元素生效。对于 `fixed` 元素，它的 `z-index` 通常不受文档流影响。

#non-fixed-element {
   position: relative;
   /* 或其他非固定定位 */
   z-index: higher-value-than-fixed-element;
}

2. **将 fixed 元素放在层叠上下文外**：如果 `fixed` 元素所在的位置没有创建一个新的层叠上下文（例如，通过浮动、`position: sticky`, 或 `transform: translateZ(0)` 等），则可以尝试将其父级设置为 `position: relative` 或 `position: static` 来创建新的层叠上下文，然后在其内部调整其他元素的 `z-index`。

3. **利用 `z-index` 和 `position: absolute` 结合**：如果非固定元素本身已经是 `position: absolute`，你可以调整其相对于祖先元素的 `top`, `right`, `bottom`, 和 `left` 属性，使其位于固定元素之上，并保持 `z-index` 高于它。

4. **考虑视口单位（viewport units）**：如果你希望元素在整个窗口中始终显示在顶部，即使 `fixed` 元素也在那里，可以使用 `vh` 或 `vw` 作为 `z-index` 基准。

5. **避免穿透现象**：如果 `fixed` 元素设置了 `pointer-events: none` 或 `opacity: 0`，可能会导致它们无法阻止非固定元素与其互动，这时需要解除这些样式影响。

记得，在实际应用中，确保理解元素的堆叠规则是很重要的，因为某些情况下，`z-index` 可能并不会按预期工作，特别是当有多个包含层叠上下文的元素时。