Is it possible to z-index a nested DIV higher (display 'above') then a root DIV in IE7?

StackOverflow https://stackoverflow.com/questions/910349

  •  05-09-2019
  •  | 
  •  

Question

UPDATE!!!

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

UPDATE2: 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>
Was it helpful?

Solution

I believe you would have to increase the z-index of #container to have this work in IE7.

alt text http://img529.imageshack.us/img529/6416/24042958.jpg

OTHER TIPS

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?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top