代码之家  ›  专栏  ›  技术社区  ›  mwieczorek

IE正在忽略定位元素上的Z索引

  •  4
  • mwieczorek  · 技术社区  · 14 年前

    再次证明,这是我生存的祸根。我正在处理的站点顶部有一个水平菜单,其中的一个项触发一个纯CSS菜单,该菜单位于父菜单DIV(相对位置)内的绝对位置。这将菜单完美地放置在IE和W3C兼容的浏览器中。

    当我在页面下方有更多的定位元素时,问题就出现了。它们也是相对定位的,因为它们内部的数据需要绝对定位。。。同样,这在我测试过的所有浏览器中都正确显示。

    问题是,然后打开顶部菜单,部分被页面下方的定位元素遮挡-实际上,它位于这些元素的下方,即使所有元素上都定义了z-index属性。(在CSS文件和内联文件中)。

    要让IE正确地显示这一点,唯一的方法是将菜单的实际HTML放在页面的底部,在页面上其他位置的元素下面(以DOM术语来说)。我做这件事绝对是万不得已。

    所有元素都是相同的类型(div)。以下是相关的HTML:

    <div id='menu'>
    <div id='cat_menu' style='display:none;z-index:10000;'>
    <table cellspacing='0' cellpadding='0' class='brmenu' width='100%'>
        [data]
    </table>
    </div>
    

    <div class='product_new' style='z-index:20;'>[data]</div>
    <div class='product_listing' style='background-color:#FFFFFF;'>[data]</div>
    

    以及相关的CSS:

    div#menu {
    height: 26px;
    padding: 0;
    position: relative;
    }
    
    div#cat_menu {
    position: absolute;
    top: 25px;
    left: 115px;
    width: 300px;
    z-index: 1000;
    }
    
     div.product_new {
    background-image: url("/images/sp_images.png");
    background-position: 0 -108px;
    background-repeat: no-repeat;
    padding 0px;
    height: 40px;
    font-size: 9pt;
    margin-top: 5px; 
    position: relative;
    z-index: 20;
    }
    
    4 回复  |  直到 14 年前
        1
  •  2
  •   deermouse    12 年前

    我也有同样的问题。我同意David的说法:“IE只可靠地呈现兄弟元素的z索引。”

    我确实想出了一个简单的替代方案。看起来ie将非同级元素的z-index呈现为零(好像它们没有z-index)。我通过将有问题的元素和它们的父元素设置为负的z-index来解决这个问题,将它们放在z-index被ie重置为零的元素下面。

        3
  •  0
  •   mwieczorek    14 年前

    var zIndexNumber = 1000;
    $$("div").each(function(e) {
        e.setStyle({ zIndex: zIndexNumber });
        zIndexNumber -= 10;
    });
    
        4
  •  0
  •   David    14 年前

    几条注释:

    • suckerfish dropdowns
    • IE只可靠地呈现同级元素的z索引。因此,最好只使用“z-index”元素作为BODY标记的直接子元素。
    • style=“…”属性使得css非常特别(需要您使用”!重要的”在你的样式表中。请不要忘记迁移那些样式属性)