CSS ie7 z-index

Question

Я пытаюсь сгенерировать рисунок следующим образом:

Но я получаю:

CSS:

 #green { height: 500px; width: 500px; background-color: green; position:absolute;z-index:13; }
    #red { height: 300px; width: 300px; background-color: red; position:absolute; z-index:17; }
    #blue { height: 400px; width: 400px; background-color: blue; position:absolute; z-index:15;}

HTML:

<div id="blue"></div>
<div id="green">
    <div id="red"></div>
</div>

Основная проблема заключается в том, что HTML-код должен быть определенным, как я указал выше.Пожалуйста, дайте мне совет, какой код CSS мне нужен для реализации этой функции (должен быть совместим с IE7 +).А может JS поможет в этом?Буду рад любым советам.

Answer 1

Атрибут CSS z-index относится только к элементам, которые существуют на одном уровне в иерархии DOM. Поэтому значение z-index, помещенное в красный цвет, не имеет значения. Только z-индекс по синему и зеленому веществу. Поскольку z-индекс синего выше, чем у зеленого, он появляется сверху. Несмотря на то, что он интуитивно понятен, он соответствует спецификациям.

У меня нет исправления, не связанного с изменением HTML, статически или во время выполнения с использованием JavaScript. Например. если красный появился на одном уровне с синим и зеленым, он должен работать нормально.

Answer 2

Удаление z-index правила для зеленого div может помочь .Проблема в том, что он не будет работать в IE7.IE8 + и другие, однако, должны быть в порядке.

Answer 3

Это проще, чем ты думаешь.Если вы вложите каждый div в другой, макет позаботится о себе.Здесь JSFiddle с кодом ниже:

<div id="green">
    <div id="blue">
        <div id="red"></div>
    </div>
</div>

---

#green
{
    width: 400px;
    height: 400px;
    background: green;
    position: absolute;
}

#green #blue
{
    width: 300px;
    height: 300px;
    background: blue;
}

#green #blue #red
{
    width: 200px;
    height: 200px;
    background: red;
}

Answer 4

Все, что вам нужно сделать, это удалить position: absolute из #green (z-index в этом div тоже становится ненужным). Работает во всех браузерах, включая IE6 и IE7.

Скрипка: http://jsfiddle.net/PD83G/.