开发者

Z-Index in Internet Explorer

I am trying to get the z-index to work in my HTML code. I have looked this up at several places, and it says that I need to add a position to my div. I've already done this and it still isn't working. Below is the CSS and the HTML that I used for the z-index.

CSS:

.Location{
    width: 1000px;
    margin-top: 50px;
    margin-left: auto;
    margin-botto开发者_JS百科m: 0px;
    margin-right: auto;
}

.logo{
     background-color: white;
     position: relative;
     left: 40px;
     float: left;
     width: 225px;
     z-index: 10;
     padding-left: 15px;
     padding-bottom: 20px;
     padding-top: 20px;
}


What you've got is correct to apply z-index: a position of type relative, fixed or absolute. The problem with IE is that it doesn't apply the z-index of an element globally across the entire document as it does in other browsers.

In IE, z-index is only applied within a stacking context, which is automatically created by any element that has position relative, fixed or absolute applied to it.

As a result, you've most likely got the following, which is why z-index isn't working as you'd expect:

<div style="position: relative">
   <div style="position: relative; z-index: 1;">
   </div>
</div>
<div style="position: relative">
   <div style="position: relative; z-index: 2;">
   </div>
</div>

In the above, all browsers but IE will always put the z-index: 2 div above the z-index: 1. However, IE won't always because both elements are in their own stacking context and therefor their z-index's don't apply to each other.

The fix is to add z-index to the parent elements that are creating the separate stacking context:

<div style="position: relative; z-index: 1;">
   <div style="position: relative;">
   </div>
</div>
<div style="position: relative; z-index: 2;">
   <div style="position: relative;">
   </div>
</div>


Well you haven't posted any HTML so it's a little hard to help you. But these articles should help you understand how to use z-index properly:

  • Find out how elements stack and start using low z-index values

  • How z-index works demo

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜