IE7 и z-index

Question

Я создаю новый сайт, и это будет сайт с разными слоями. На данный момент я обдумываю структуру моей страницы и то, как они взаимодействуют друг с другом.

Например, я буду использовать человека и дверь. Человек идет через дверь. Вы увидите, что часть двери будет спереди, а другая - сзади человека.

Чтобы создать это. Я использую z-index. Поскольку все движется, я хочу установить элемент двери в одном элементе div, а человека - в другом.

Вот пример кода

<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>

Теперь проблема в том, что передо мной стоит человек (#person). Дверь (#action) в спину. Но один элемент (#frontofhouse) должен быть впереди. Если вы играете с z-index, все будет хорошо работать во всех браузерах. Но не в IE7.

Кто-нибудь знает, как это исправить?

Спасибо

Answer 1

IE7 глючит с z-index, см .: IE7 Z-Index проблема - контекстное меню

В этом случае, однако, кажется, что это трудно исправить без большого количества ошибок

Вот версия, которая выглядит одинаково (или достаточно близко) в IE7 и современных браузерах.

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>

Answer 2

Я нашел это решение . Попробуйте с позицией: относительно .

Answer 3

Вы можете решить эту проблему, удалив div 'action' и отрегулировав top, слева от frontofhouse, actiontwo.Ниже приведен пример:

<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>

Answer 4

было бы намного проще, если бы вы создали jsfiddle. Попробуйте добавить z-index: 3 для элемента #action