IE7 and z-index

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

score 2 · Accepted Answer · edited May 23 '17 at 12:12

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>

score 0 · Answer 2 · answered Oct 13 '11 at 09:10

0

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

answered Oct 13 '11 at 09:10

simoncereska

3,035
17
24

like @kst said, position relative should help, but if you still need to have this positioned absolute, try setting #container relative and z-index: 1 Can't check it on real IE7 so it is just suggestions – simoncereska Oct 13 '11 at 09:20

score 0 · Answer 3 · answered Oct 13 '11 at 09:12

0

I found this solution. Try with position:relative.

answered Oct 13 '11 at 09:12

kst

1,498
3
19
34

score 0 · Answer 4 · answered Oct 13 '11 at 09:24

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>

But if you want to move the #action element. You now need to move 2 elements and that's something I don't want to do — jeroenjoosen, Oct 13 '11 at 09:47

IE7 and z-index

4 Answers4