div分层问题

Question

我正在为内部服务器上的现有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中的可见性

Answer 1

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

• http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
• IE7 Z-Index Layering Issues
• http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

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

祝你好运！

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

IE在z-index方面存在一些问题（请参阅Google）。由于我必须修复类似的问题，我被迫使用javascript来隐藏背景元素，这对你来说并不适合。

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