SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: index-z in ie6

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    index-z in ie6

    HTML Code:
    <div id="001" style="width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;">
      001
      <div id="002" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:red;position:absolute;z-index:4">
        002
      </div>
    </div>
    <div id="003" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:2">
      003
    </div>
    I have 3 DIV, DIV 001 and DIV 003 are top DIV, DIV 002 is the sub DIV from DIV 001.
    All the DIV position are absolute. It is not allow me to change the DIV level and position in my whole code.

    I want DIV 001 in the below, DIV 003 in the middle, DIV 002 in the top.

    I set DIV 003 with a low z-index, DIV 002 with a high z-index and not set any z-index for DIV 001. It is show correct in IE8, FIREFOX3.6, OPERA10 and Safari4, but show wrong in IE6: DIV 003 is alwways on the top of DIV 002.
    How can I do?
    Last edited by ScallioXTX; Sep 25, 2010 at 06:33. Reason: indented html

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    IE 6 and 7 have a z-index bug. They use "0" for "auto" instead of "auto" (which is the default).

    You'll have to set a z-index on the parent div (001) and then adjust the others accordingly. Right now you've left it at its default by listing no z-index at all, which is fine according to the specs and the other browsers deal with it correctly.

    http://annevankesteren.nl/2005/06/z-index

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    SP is on the right track, but your solution will NOT do what he's asking.

    See, z-index is always RELATIVE to the parent, so if he sets a z-index on #001, #003 will always be over or under #001 or #002 regardless of what #002 is set for.

    Basically:

    if
    #001 is set to z-index:1
    #002 is set to z-index:4
    #003 is set to z-index:2

    #002 will appear over #001 and under #003

    if
    #001 is set to z-index:3
    #002 is set to z-index:1
    #003 is set to z-index:2

    #003 will appear under #001 and #002

    By omitting the z-index OP is able to position #002 over #003 in standards compliant browsers, but is SOL with that markup in regards to placement in IE.

    Best bet is to get #002 out of #001, or to not use absolute positioning on it and maybe try some negative margin tricks instead. Might also be worth looking at NOT absolute positioning #001 and relative positioning it instead, or moving #003 into #001 so it's a sibling element.

    Though with so much absolute positioning going on in such a odd nesting, I would kind-of assume there's something horribly flawed with the markup/layout this is being put into. I'd have to see what's ACTUALLY being done on the page in question, but this SMELLS of over-complicating something simple.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If you remove the stacking context (positioning) from the parent (#001) then you can interweave the elements in IE6 as they will then all share the same stacking context (the viewport).

    e.g.

    Code:
    <div id="a001" style="width:100px ;height:50px; border:1px solid #999; background:green;"> 001
        <div id="a002" style="margin-top:10px; margin-left:20px; width:100px ;height:50px; border:1px solid #999; background:red;position:absolute;z-index:4"> 002 </div>
    </div>
    <div id="a003" style="top:20px; left:20px; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:2"> 003 </div>
    However that's not very stable because they are now relative to the viewport so better to add a parent and do this instead.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .wrap {
        width:100&#37;;
        position:relative;
    }
    #one {
        width:100px;
        height:50px;
        border:1px solid #999;
        background:green;
    }
    #two {
        top:40px;
        left:40px;
        width:100px;
        height:50px;
        border:1px solid #999;
        background:red;
        position:absolute;
        z-index:4
    }
    #three {
        top:20px;
        left:20px;
        width:100px;
        height:50px;
        border:1px solid #999;
        background:yellow;
        position:absolute;
        z-index:2
    }
    </style>
    </head>
    <body>
    <div class="wrap">
        <div id="one"> 001
            <div id="two"> 002 </div>
        </div>
        <div id="three" style="">003 </div>
    </div>
    </body>
    </html>
    Don't forget the units on your dimensions or browsers will treat them as zero when using a strict doctype. Also ids can't begin with a digit.

    As Jason said above you could probably do this more simply with a few negative margins depending on the situation.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •