无法弄清楚 Chrome 上的堆叠顺序问题

Question

我折叠的下拉菜单隐藏在 Chrome 和 Safari 上的 sequence.js 滑块后面。 Firefox 上似乎没有发生问题。尝试更改与滑块和菜单相关的几乎每个对象的 z-index。非常感谢任何可以检查我的网站并告诉我我做错了什么的人。

Answer 1

它实际上并没有隐藏在幻灯片后面。

这是因为当您滚动到页面顶部时，"sticky" class 从页眉中删除了。如果#header 始终有 .sticky，则菜单显示正常。

您页面顶部的样式似乎是针对 "header.sticky"，而不仅仅是 "header"。

修复：手动添加 css:

#header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
  box-shadow: 0 5px 5px -5px #333;
}

或将页眉中的CSS更改为目标"header"。

Answer 2

说明

它来自 sticky header 并且定位 objects 和强制高度不匹配。

默认情况下，没有粘性 header，子菜单被隐藏，因为它是 parent 的 child 元素，由于某些媒体查询而具有强制高度。正在隐藏溢出。

添加 sticky header 时，header 获得 fixed 的位置。您不能使用 absolute 相对于 fixed elements 的定位。我猜你的元素是相对于文档 window 定位的，这就是它现在显示 fixed 属性的原因。

Cant figure out stacking order issue on Chrome