IE7 Z-Index Layering Issues

Question

I ve isolated a little test case of IE7 s z-index bug  but don t know how to fix it   I have been playing with z-index all day long   What is wrong with z-index in IE7   Test CSS   input       border  1px solid  000     div       border  1px solid  00f     ul       border  1px solid  f00      background-color   f00      list-style-type  none      margin  0      padding-left  0      z-index  1000     li       color   fff      list-style-type  none      padding-left  0      margin-left  0     span envelope       position  relative     span envelope ul       position  absolute      top  20px      left  0      width  150px      Test HTML    lt form gt     lt label gt Input  1  lt  label gt     lt span id  envelope-1  class  envelope  gt       lt input name  my-input-1  id  my-input-1    gt         lt ul gt           lt li gt item lt  li gt           lt li gt item lt  li gt           lt li gt item lt  li gt           lt li gt item lt  li gt         lt  ul gt     lt  span gt     lt br gt  lt br gt     lt label gt Input  2  lt  label gt     lt span id  envelope-2  class  envelope  gt       lt input name  my-input-2  id  my-input-2    gt     lt  span gt   lt  form gt

User · Answer

In IE6 in general  certain UI-elements are implemented with native controls   These controls are rendered in a completely separate phase  window   and always appear above any other controls  regardless of z-index   Select-boxes are another such problematic control   The only way to work-around this issue is to construct content which IE renders as a seperate  window  - i e  you can place a selectbox over a textbox  or  more usefully  an iframe   In short  you ll need to put  on-hover  like things such as menu s in an iframe in order to let IE place these above built-in UI controls   This should have been fixed in IE7  see http   blogs msdn com ie archive 2006 01 17 514076 aspx  but perhaps you re running in some kind of compatibility mode

User · Answer

I encountered this issue  but on a large project where HTML changes had to be requested and became a whole issue  so I was looking for a pure css solution   By placing position relative  z-index -1 on my main body content my header drop down content suddenly displayed above the body content in ie7  it was already displaying without issue in all other browsers and in ie8    The problem with that was then this disabled all hover and click actions on all content in the element with the z-index -1 so i went to the parent element of the whole page and gave it a position relative  z-index 1  Which fixed the issue and retained the correct layering functionality   Feels a bit hacky  but worked as required

User · Answer

Z-index is not an absolute measurement  It is possible for an element with z-index  1000 to be behind an element with z-index  1 - as long as the respective elements belong to different stacking contexts   When you specify z-index  you re specifying it relative to other elements in the same stacking context  and although the CSS spec s paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto  meaning your entire document should be a single stacking context   you did construct a positioned span  unfortunately IE7 interprets positioned content without z-index this as a new stacking context   In short  try adding this CSS    envelope-1  position relative  z-index 1     or redesign the document such that your spans don t have position relative any longer    lt html gt   lt head gt       lt title gt Z-Index IE7 Test lt  title gt       lt style type  text css  gt          ul               background-color   f00               z-index  1000              position  absolute              width  150px                 lt  style gt   lt  head gt   lt body gt       lt div gt           lt label gt Input  1  lt  label gt   lt input gt  lt br gt           lt ul gt  lt li gt item lt li gt item lt li gt item lt li gt item lt  ul gt       lt  div gt        lt div gt           lt label gt Input  2  lt  label gt   lt input gt       lt  div gt   lt  body gt   lt  html gt    See http   www brenelz com blog 2009 02 03 squish-the-internet-explorer-z-index-bug  for a similar example of this bug   The reason giving a parent element  envelope-1 in your example  a higher z-index works is because then all children of envelope-1  including the menu  will overlap all siblings of envelope-1  specifically  envelope-2    Although z-index lets you explicitly define how things overlap  even without z-index the layering order is well defined   Finally  IE6 has an additional bug that causes selectboxes and iframes to float on top of everything else

User · Answer

http   www vancelucas com blog fixing-ie7-z-index-issues-with-jquery     function     var zIndexNumber   1000     div   each function           this  css  zIndex   zIndexNumber       zIndexNumber -  10

User · Answer

It looks like not a ie bug  just for diffrent understanding to the css standard  If outside container is not specified the z-index  but the inner element specified a higher z-index  So the container s sibling maybe overlay the high z-index element  Even if like that  it only occurs in IE7  but IE6  IE8 and Firefox is ok

User · Answer

In IE positioned elements generate a new stacking context  starting   with a z-index value of 0  Therefore z-index doesn   t work correctly    Try give the parent element a higher z-index value  can be even higher than the child   s z-index value itself  to fix the bug

User · Answer

I solved it by using the developer tools for IE7  its a toolbar  and adding a negative z-index to the container of the div that will be below that the other div

User · Answer

I found that I had to place a special z-index designation on div in a ie7 specific styelsheet   div   z-index 10     For the z-index of unrelated divs  such as a nav  to show above the slider  I could not simply add a z-index to the slider div itself

User · Answer

If the previously mentioned higher z-indexing in parent nodes wont suit your needs  you can create alternative solution and target it to problematic browsers either by IE conditional comments or using the  more idealistic  feature detection provided by Modernizr   Quick  and obviously working  test for Modernizr   Modernizr addTest  compliantzindex   function        var test    document createElement  div            fake   false          root   document body     function                  fake   true              return document documentElement appendChild document createElement  body                        root appendChild test       test style position    relative       var ret    test style zIndex     0       root removeChild test        if  fake            document documentElement removeChild root              return ret

User · Answer

This bug seems to be somewhat of a separate issue than the standard separate stacking context IE bug  I had a similar issue with multiple stacked inputs  essentially a table with an autocompleter in each row   The only solution I found was to give each cell a decreasing z-index value

User · Answer

If you wanna create dropdown menu and having a problem with z-index  you can solve it by creating z-indexes of same value  z-index 999  for example    Just put z-index in parent and child div s and that will solve problem  I solve the problem with that  If i put different z-indexes  sure  it will show my child div over my parent div  but  once i want to move my mouse from menu tab to the sub-menu div  dropdown list   it dissapear    then i put z-indexes of same value and solve the problem

[css] IE7 Z-Index Layering Issues

Examples related to css

Examples related to internet-explorer-7

Examples related to z-index