z-index in IE 6 and IE 7

问题

I had a nested div as I show below:

<div id="header"><div class="header-content">
 <div class="button"></div>
 <div id="menu"></div>
</div>
  <ul>
    <li></li>
  </ul>
</div>

Now my javascript code like that:

<script>
 $(".button").click(function(){
   $("#menu").css({
     position:"absolute",
     zIndex:50000,
     display:"block"
   });
 });
</script>

It's work fine in firefox but in IE 6 and IE 7 it's not above all. Any one had an experienced about this help me please!

回答1:

Exactly the same

var show = function(){
  var menu = document.getElementById("menu");
  menu.style.position = "absolute";
  menu.style.zIndex = "50000";
  menu.style.display = "block";
  menu.style.top = 0;
}

works absolutely fine for me without JQuery. For both IE6 and IE7. Unfortunately can't test with JQuery now.

Is this example the exact code you are using?

回答2:

Your problem is probably CSS related, rather than javascript related. Explorer handles z-index child, parent, and sibling elements different from the other browsers.

~~This article on z-index I wrote a while ago may help you out.~~

The article is now down so here is the wayback machine's archive

回答3:

I would guess you're trying to put the div over a <select>, <iframe> or <embed> / <object> such as Flash.

This is a known bug in earlier IEs.
There is a hack to get around it by putting your div inside an iframe, but it's not pretty.

回答4:

The problem could be that your menu element is empty, and IE therefore collapses it so you can't see it. (At least with your example code, that could be a problem. If your markup doesn't really look like that, please show us what it really looks like...)

Try:

<div id="header">
    <div class="header-content">
        <div class="button">& nbsp;</div>
        <div id="menu">& nbsp;</div>
    </div>
    <ul>
        <li>& nbsp;</li>
    </ul>
</div>

EDIT: The spaces between & and nbsp; shouldn't be there, but SO wouldn't actually print out the code if I just wrote  ...

回答5:

<form action="ketqua.tintuc" name="myform">
    <div class="Search-text-box"> <img src="http://xalo.vn/1.gif" onclick="return _e_(event,0)" />
        <input type="text" name="q" value="{query/@query}" text="{query/@query}" />
        <input id="hq" type="hidden" name="hq" value="{query/@hiddenquery}" />
        <div class="Search-menu">
            <xsl:choose>
                <xsl:when test="@category-label != ''">
                    <xsl:value-of select="@category-label" />
                </xsl:when>
                <xsl:otherwise>
                    Search all
                </xsl:otherwise>
            </xsl:choose>
        </div>
    </div>
    <div class="search-btn"></div>
    <div id="Search-header-menu">
    <ul>
        <li> <a cat="">Tìm tất cả</a> </li>
    </ul>
</form>

this all my real html code and below exactly javascript code:

$("#Search-header-menu").css({
      top: top,
      left:left,
      display:"block",
      background:"#fff"
    });

来源：https://stackoverflow.com/questions/896998/z-index-in-ie-6-and-ie-7

标签

jquery

z-index