移动菜单和动画内容的棘手 z-index 问题

Question

在我的网站上，我有一个 z-index 问题，内容 z-index 较低，但显示在 上方 菜单 (z-index: 4;) mobile/resized 浏览器（水平调整大小直到图像与移动菜单水平对齐）。这是相关 CSS:

背后的原因

• 如果没有 CSS 生成 content，CSS 动画就不会发生，所以我不得不添加一个 div 元素作为图像的父元素。
• 用于动画的 div 会干扰图像查看器，并且 JavaScript 检测到点击或点击 event.target 作为 div 而不是图像。
• 添加 position: relative; z-index: 1; 解决了 那个问题 并允许图像 clicked/tapped 并在图像查看器中查看，尽管创建了 这个post.
• 尽管菜单的 ul 具有 z-index: 4; 和 使用 position: fixed;.

到目前为止我尝试过的：

• 我曾尝试更改各种 position 值，同时保持当前布局，但没有成功。
• 使用 z-index: 4 !important; 对菜单没有影响。
• 为内容中的图像设置 z-index: 0; 或 invalid/lower 值会导致 clicking/tapping 的 event.target 恢复到 div 父元素（动画需要）。
• 确保其他元素 和 CSS 生成的元素没有冲突的 property/value 对，例如 position 和 z-index.

此问题出现在 Waterfox、Chrome 和 Safari 中。我很困惑考虑到 relative 比 fixed 加上 更高的 z-index 值没有得到尊重......所有人浏览器...同时。尽管此时我真的可以使用第二个意见，但我仍在解决这个问题。

这是临时的 URL 不适合搜索引擎索引： https://www.johnbilicki.com/eridel/

有什么想法吗？

Answer 1

好的，所以对于初学者，特别是如果您打算将其作为服务出售，我强烈建议您多了解自然 semantic structure and DOM Flow，因为您的元素结构相当混乱。一个简单的例子是 main 在 header 元素之上的排序，以及你用来在视觉上定位事物的技巧，如果你有一个自然的 DOM 流程（这还可以将您的 CSS/html 减少到原来的一小部分，并在网站 "painted" / 呈现时提高性能，并且您不需要明确定义 z-index 或 运行 到很多跨浏览器问题等等，比如你的 CMS 东西看起来更干净了？

但是，快速解决您当前的困境。只需从 CSS 选择器 body > header 中删除 z-index: 0，瞧，您又回到了正轨。希望这对您有所帮助，干杯！