div分层问题答案

【问题标题】：div layering problemsdiv分层问题
【发布时间】：2011-07-06 11:11:05
【问题描述】：

我正在为内部服务器上的现有 Web 应用程序开发，我无法在此处发布所有代码，因为它非常非常混乱，但我可以向大家展示问题的屏幕截图和相关的 css 代码：

语言菜单应该在蓝色边框的顶部，但它在下方。

在 FF 中效果很好，这是 IE7 截图

蓝色边框css：

.categoryBox {
    width:100px;
    background-color:#000;
    border-style:solid;
    border-width:1px;
    border-color:#007CF7;
    padding:5px;
    float:left;
    height:260px;
    margin-right:25px;
    margin-bottom:20px;
    text-align:center;
    width:200px;
    position:relative;
}

语言菜单css：

#ChooseLanguageDlg
{
    display: none;
    position: absolute;     
    width: 87px; 
    height: 180px; 
    padding-left: 10px;
    padding-right: 10px;
    padding-top:0;
    margin-top: -9px;
    border: none 1px White;
    left: 751px;
    top: 10px;
    font-size:11px;
    overflow:hidden;
    text-align:center;
}

注意：语言菜单使用 javascript 切换来显示/隐藏。

编辑： 向语言框添加 z-index 不会改变 IE 中的可见性

【问题讨论】：

检查语言框的父节点是否在类别框后面
您可以在JS Bin 上创建一个测试用例，方法是获取问题页面的来源并将导入的样式表放在<style> 标记中。如果您愿意，您还可以编辑页面上的任何文本。只要demo也有IE7的问题，应该可以帮到你。

标签： html css

【解决方案1】：

IE7 的z-index 存在已知问题。在没有看到您的页面的情况下，我能做的最好的就是向您指出一些有用的链接来解释问题：

一般的想法是在下拉列表的父元素上戳position: relative（通常将其删除）和z-index，直到它被修复。

祝你好运！

【讨论】：

【解决方案2】：

IE 的 z-index 存在一些问题（请参阅 Google）。因为我必须解决一个类似的问题，所以我不得不使用 javascript 来隐藏背景元素，这并不适合你。

如果可能，您可以尝试更改 html 代码中的创建顺序。

【讨论】：

【解决方案3】：

为语言框的样式添加 z-index？

【讨论】：

【解决方案4】：

您可以尝试添加 z-index。这将定义哪个元素位于哪个元素之上： z-index

【讨论】：

【解决方案5】：

手动设置语言框的z-index 可能会有所帮助。当然，如果您不想这样做，将语言框放在标记中的蓝色框之后也可以解决问题。

【讨论】：

我已经尝试将z-index:999 添加到语言框中，但它并没有改变任何东西。此外，无法将语言框移动到其他位置。