IE7 and z-index

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 开发者_如何学JAVAid="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

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>

would be much easier if you created some jsfiddle. Try adding z-index: 3 for an #action element

I found this solution. Try with position:relative.

You can fix that problem by remove 'action' div and adjust top, left of frontofhouse, actiontwo. Following is example:

<div id="container">
        <div id="bg"></div>
        <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 4;'></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: 5; 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>
<div id="container2" style="position: absolute; top: 350px;">
        <div id="bg2"></div>
        <div id="person2" style='width:200px; height:200px; background:#000; position: absolute; z-index: 4; top: 0px; left: 0px;'></div>
        <div id='frontofhouse2' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 5; top: 40px; left:40px;' ></div>
        <div id="actiontwo2" style='width:300px; height:300px; background:#F00; position: absolute; top: 20px; left: 20px; z-index:0;'></div>
</div>