相对元素与 Chrome 中的绝对元素重叠答案

【问题标题】：Relative elements overlap absolute ones in Chrome相对元素与 Chrome 中的绝对元素重叠
【发布时间】：2023-03-26 07:22:01
【问题描述】：

我有一个看起来很简单的安排：UL 中的标签列表，最后一个列表项包含标签“其余”的绝对定位列表。

在此处查看精简演示：http://dev.timmurtaugh.com/demo/chrome-problem/browse-bar-sandbox.html

在 Chrome 中（据我所知，只有 Chrome；版本 19.0.1084.56）绝对定位的列表与其下方的“仪器”标题重叠。

救命！

【问题讨论】：

imgur.com/fLGf1 - 像这样？在 Chrome 19 中通过将 .seeMore 设置为 z-index: 2 并将 .browseBar h2.toggles 设置为 z-index: 1 来做到这一点 - 可能需要调整这些以适应您的 z-index 分配的其余部分，不过:)

标签： css google-chrome css-position

【解决方案1】：

尝试将 z-index:999 添加到下面提到的类中：

.browseBar ul.tagList li.seeMore, .browseBar ul.tagList li.clearAll {
  position: relative;
  color: #C82D09;
  cursor: pointer;
  z-index: 999; /* Add This */
}

【讨论】：

啊啊啊啊，我知道我是个白痴。 PARENT 的 z-index。谢谢谢谢！