css - 下拉项中的文本重叠项

Question

嘿，所以我有这种情况，如果一个页面包含文本，文本包含一个包含一些元素的 UL 列表，那些 LI 元素将与下拉列表中的元素重叠，然后用户向下滑动下拉菜单。

我想我已经通过将以下内容添加到下拉列表周围的 Div 来修复它。

position:relative; z-index:999999;

给我

#source-programs-dd { overflow: auto; background: #fff; max-height: 198px; position:relative; z-index:999999;}

除了 IE7 之外，它在任何地方都有效。有什么想法吗？

Answer 1

为了帮助直接解决您的问题，我需要查看您的 HTML 和 CSS。但总的来说，IE7 在 z-index 以及它如何计算子元素的 z-index 方面存在一个已知问题。

围绕这个问题有几个 Stackoverflow 问题。以下是一些可以提供帮助的内容:

IE7 Z-Index issue - Context Menu

expanding the menu appearing underneath the gallery in IE7

大意是在IE7中，z-index是在siblings的父元素处计算的。这听起来有点奇怪，所以这里有一个例子:

<div id="parent1">...</div>
<div id="parent2">...</div>

如果 .parent1 有类似 UL 菜单的东西与 .parent2 重叠，则 .parent2 可能出现在该内容的前面无论 .parent1 的任何子元素的 z-index 是什么 .

这是因为 IE7 比较了 .parent1 和 .parent2 的 z-index，从某种意义上说，会让所有的子元素继承它们的值。 (子元素实际上有自己的相互关联的 z-index 上下文。但是其他父元素的子元素首先受其父元素的影响，相对于其他父元素的子元素)

解决方案是找到导致问题的 2 个元素，并找到它们共享彼此为 sibling 的父元素的位置。

然后在这些元素上应用适当的 z-index。

.parent1{ z-index:10; }
.parent2{ z-index:1; }

如果您发布您的 HTML，我可以尝试帮助找到您的确切问题。

干杯!