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

Question

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

• 如果没有 CSS 生成 content，CSS 动画就不会发生，因此我必须添加一个 div 元素作为图像的父元素。
• 用于动画的div 会干扰图像查看器，JavaScript 会将点击或点按event.target 检测为div 而不是图像。
• 添加 position: relative; z-index: 1; 解决了该问题，并允许在图像查看器中单击/点按和查看图像，但会为此帖子创建问题。
• 在移动设备上，尽管菜单的ul 具有z-index: 4; 并且 使用position: fixed;，但这些图像错误地显示为比菜单更靠近用户。

到目前为止我已经尝试过：

• 我尝试在保持当前布局的同时更改各种 position 值，但没有任何运气。
• 使用z-index: 4 !important; 对菜单没有影响。
• 为内容中的图像设置z-index: 0; 或无效/较低的值会导致event.target 用于单击/点击以恢复为div 父元素（动画需要）。
• 确保其他元素和 CSS 生成的元素没有冲突的属性/值对，例如position 和z-index。

该问题出现在 Waterfox、Chrome 和 Safari 中。考虑到relative 的重视程度低于fixed plus 更高的z-index 值没有得到尊重......同时被所有浏览器...... .我仍然在解决这个问题，但在这一点上我真的可以使用第二个意见。

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

有什么想法吗？

Answer 1

好的，所以对于初学者，特别是如果您打算将其作为服务出售，我强烈建议您更多地了解自然semantic structure 和DOM Flow，因为您的元素结构相当模糊。一个简单的例子是您在header 元素上方对main 的排序，以及您用来在视觉上定位事物的技巧，如果您有自然的 DOM 流（这也会将您的 CSS/html 切割成当网站被“绘制”/渲染时，它的一小部分并提高性能，并且您不需要明确定义 z-index 或遇到尽可能多的跨浏览器问题等，比如您的 CMS 看起来更干净?

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