Question

I’m building a new website and it will be a website with different layers.
For the moment i’m thinking out the structure of my page and how they interact to each other.

For example I will use a person and a door. The person walks through the door. You will see that a piece of the door will be at front and an other piece at the back of the person.

To create this. I use z-index. Because everything moves around I want to set the door element in one div element and the person in another.

Here a code example

<div id="container">
        <div id="bg"></div>
        <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 1;'></div>
        <div id="action" style='width:300px; height:300px; position: absolute; top: 20px; left:20px;'>
            <div id='frontofhouse' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 3; top: 20px; left:20px;' ></div>
            <div id="actiontwo" style='width:300px; height:300px; background:#F00; position: absolute; top: 0px; left:0px; z-index:0;'></div>
        </div>
</div>

Now, the problem is that I have the person (#person) in front. The door (#action) in back. But one element (#frontofhouse) needs to be in the front.
If you play with the z-index everything will work nice in all browsers. But not in IE7.

Does anyone know a fix for this?

Thanks

Answer 1

IE7 is buggy with z-index, see: IE7 Z-Index issue – Context Menu

In this case though, it seems to be difficult to fix without a lot of messing around.

Here’s a version that looks the same (or close enough) in IE7 and modern browsers.

http://jsfiddle.net/thirtydot/ddXEA/

<div id="container" style="position:relative">
    <div id="bg"></div>
    <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 1;'></div>
    <div id="action" style='width:300px; height:300px;'>
        <div id='frontofhouse' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 3; top: 30px; left:30px;' ></div>
        <div id="actiontwo" style='width:300px; height:300px; background:#F00; position: absolute; top: 10px; left:10px; z-index:0;'></div>
    </div>
</div>