tags:

views:

2340

answers:

2

UDPATE!!!

Suggested answer is NOT correct, my mistake. The #container DIV should've had "float:left;". Please verify the HTML in Firefox and IE7. You can see the difference!

I can't get a nested DIV to display above a hierarchically higher nested DIV by using z-index... The overlay keeps laying over the lower nested DIV even though the lower nested DIV has a higher z-index... Is this even possible in IE7?

The following displays the blue #details above the green #overlay in Firefox, however in IE7 the blue #details is below the green #overlay

UDPATE2: Pricey: Adding "z-index:99;" to the #container style makes the class .item divs appear (in Firefox, IE is messed up: anyway both don't display correctly), while they should be under the overlay! Without the #container z-index set, it displays correctly in Firefox, but not IE....

<html>
    <body>
        <style type="text/css">
            .item {
                float:left;width:75px;height:75px;background-color:red;
            }
        </style>
        <div id="main" style="position:relative;">
            <!-- this one should overlay everything, except #details -->
            <div id="overlay" style="position:absolute;
                                     top:0px;
                                     left:0px;
                                     width:500px;
                                     height:500px;
                                     z-index:1;
                                     background-color:green;"></div>
            <div id="container" style="position:relative;float:left;">
                <!-- these ones should display UNDER the overlay: so NOT visible -->
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <!-- this one should display above the overlay -->
                <div id="details" style="position:absolute;
                                         width:200px;
                                         height:200px;
                                         background-color:blue;
                                         left:400px;
                                         z-index:99;"></div>
            </div>
        </div>
    </body>
</html>
+2  A: 
Pricey
Great, that works!
Ropstah
Pricey is correct. Just confirmed it with `z-index:98;` added to the style of #container, and it works as expected
Jonathan Fingland
I'm sorry I made a mistake in my example: the #container is floating (float:left;). So it doesn't work.......!!! You deserve the answer, but anyone has an answer for the real problem??
Ropstah
I just tried it in IE7 with the #container float: left; and it still works ? is there another value missing at all?
Pricey
Have you copied the text from the post? I've added an image in the question......
Ropstah
I have attached an image of the page in IE7 and the HTML from your post with an added z-index on the #container. Is this what you wanted? Your screenshot did not have this value.
Pricey
Please check update2: I forgot to 'style' the .items, that's where the problem comes in when you set the #container z-index... Because they should be invisible (overlayed) while they become visible.
Ropstah
+1  A: 

I dont think IE7 is going to let you do that unless you can change your markup.

#container is not sitting behind #overlay until it is given an absolute position and if you change the z-index of the #container to -1 then its child #details is going behind with it.

Changing .items z-index to -1 will also not work.

If its not possible to move #details outside of #container?? I can not suggest an alternative without seeing exactly what your trying to achieve as an end result and what control you have, if any?

E.g. whats the point in the overlay? will it be a slightly transparent div or solid? do you not want to hide the .items if a user will not be able to see them behind the overlay?

Do you have access to any javascript libraries such as Jquery.. to be able to move #details to a different location in the DOM?

Pricey
I've repositioned in a slightly different way. I have moved the overlay INSIDE the container and positioned it with a negative top/left... Now everything works fine! Thanks for your help
Ropstah