下拉项目中的文本重叠项目答案

【问题标题】：Text overlapping items in Dropdown items下拉项目中的文本重叠项目
【发布时间】：2012-03-13 00:27:27
【问题描述】：

嘿，我有这种情况，如果页面包含文本并且文本包含带有一些项目的 UL 列表，那么这些 LI 项目将与下拉列表中的项目重叠，然后用户向下滑动下拉列表。

我以为我可以通过在下拉列表周围的 Div 中添加以下内容来修复它。

position:relative; z-index:999999;

给我

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

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

【问题讨论】：

标签： css

【解决方案1】：

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

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

一般的想法是，在IE7中，z-index是在兄弟元素的父元素处计算的。这听起来有点奇怪，所以这里有一个例子：

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

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

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

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

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

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

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

干杯！

【讨论】：