css - 即 z-index 不出现在元素后面

标签 css internet-explorer

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 9 年前

我正在尝试为臭名昭著的 IE z-index 错误找到解决方法。我已经阅读了来自 Google 的各种文章,但仍然发现我的下拉菜单出现在 Accordion 面板后面。我已经发布了我的代码,如果有人能帮助我理解我哪里出错了,我将不胜感激。我试过 ie9 及以下的版本。谢谢

CSS代码

#menu {
    list-style:none;
    width:97%;
    margin:20px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;
    color: black;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
    z-index:1000;
}

最佳答案

您需要回到 IE 和定位的基础。

主要要考虑的是主要元素在 DOM 中的位置,即文档结构。

对于初学者,您需要给#menu 一个“相对”位置和 z-index。

您还需要确定为 Accordion 设置了哪些规则。

将一些元素的 z-index 设置为“1000”并希望最好的结果不会被 IE 削减。

使用您的文档结构,将您的页面容器/包装器视为“z-index:0”,如果需要,在您测试时设置它。

然后遍历各种元素、标题、导航等并检查它们的位置、z-index 等并增加图层。

<div id="container">          <<<<< 0
<header>                      <<<<< 1
<div id="accordion"></div>    <<<<< 2
<nav id="menu></nav>          <<<<< 3
</header>
</div>

关于css - 即 z-index 不出现在元素后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17063902/

上一篇:html - 使用 css 制作圆弧

下一篇:html - 我如何使我的导航栏居中?

相关文章:

jquery - 在图像上单击打开覆盖文本字段的弹出窗口/模式

html - 纯 CSS 框以特定方式折叠

javascript - 将元素拆分为列,每列包含特定数量的元素(html、css、javascript)

html - 增加 Bootstrap Jumbotron 的高度但保持响应

jquery - IE JQuery 就绪功能不起作用

html - IE 10,当我点击兼容性按钮时,一切都向左移动

php - 无法使用带有 php 的 Selenium 将 cookie 添加到页面

css - 使用 css reset 后应用填充

javascript - 点击标签不勾选ie8/9中的单选框

javascript - 动态大小的选择元素 IE 不滚动