Javascript-форум - Баг в ФФ с z-index?

Javascript-форум (https://javascript.ru/forum/)

- Firefox/Mozilla (https://javascript.ru/forum/css-html-firefox-mizilla/)

- - Баг в ФФ с z-index? (https://javascript.ru/forum/css-html-firefox-mizilla/17-bag-v-ff-s-z-index.html)

Баг в ФФ с z-index?

Собственно страница:

<html>
<head><title>title</title></head>
<body style="margin:0px;padding:0px;">
<div style="background:#aaa;width:100px;height:100px;z-index:100;">
    <div style="background:#555;width:100px;height:100px;left:3px;top:3px;position:absolute;z-index:-1;"></div>
</div>
</body>
</html>

На ИЕ и опере получаем ожидаемый результат - "тень"
ФФ - просто не отображает второй див.

На самом деле это не баг.

Просто в Firefox у body стоит z-index:0, и поэтому у тебя body перекрывает фон с индексом -1.

Фон оказывается за body.

тоже не так :)
У родительского дива z-index=100

Сделай z-index:0 вместо -1. Относительная позиция не изменится, а разницу увидишь сразу :/

z-index=0
во всех браузерах одинаково...
одинаково неправильно :)
т.е. правильно - второй див прорисовался поверх первого, но мне нужно подложить второй под первый.

предложили/показали еще одну фишку:
если первому диву задать position:absolute, то ФФ начинает показывать, ИЕ с оперой начинают глючить.

Вот ссылка в тему
http://phoenity.com/newtedge/drop_shadow/

вот пример решения

<html>
<head><title>title</title></head>
<body style="margin:0px;padding:0px;">
<div id="Layer1" style="position:absolute; left:15px; top:15px; width:400px; height:200px; z-index:1; background-color: #000066; layer-background-color: #000066; border: 1px solid #000000;"></div>
<div id="Layer2" style="position:absolute; left:10px; top:10px; width:400px; height:200px; z-index:2; background-color: #0099FF; layer-background-color: #0099FF; border: 1px solid #000000;"></div>
</body>
</html>

Правда, тут абсолютные дивы...

проблема в том, что они не вложены. с ними неудобно работать.
Зато теперь я умею создавать страницы, которые по разному отображаются в этих браузерах:

<html>
<head><title>title</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#div1 {
    background-color: #AAAAAA;
    width: 100px;
    height: 100px;
    left: 0px;
    top: 0px;
    z-index: 0;
}

#div2 {
    background-color: #555555;
    width: 100px;
    height: 100px;
    left: 3px;
    top: 3px;
    position: absolute;
    z-index: -1;
}
</style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
</body>
</html>

ребята, не ссорьтесь =)
это глюк файрфокс -
бедолага не умеет работать с отрицательными значениями
z-index.
из-за лисы выставляем только положительные значения скажем 1 и 2 :))
:D

Все лисица умеет

<html>
<head><title>title</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#div1 {
    background-color: #AAAAAA;
    width: 100px;
    height: 100px;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 0;
}
                                                
#div2 {
    background-color: #555555;
    width: 100px;
    height: 100px;
    left: 3px;
    top: 3px;
    position: absolute;
    z-index: -1;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>

Скажу больше, она ведет себя правильно. z-index работает только для спозиционированных элементов: http://www.w3schools.com/css/pr_pos_z-index.asp
Поясню: в первом моем посте я не спозиционировал "родительский" див, поэтому z-index там просто проигнорировался, затем (вот тут начинается специфика ФФ) второй див с отрицательным z-index благополучно ушел под body.
Однако не все так радужно:
опера и ИЕ дружно отказались понимать корректную(?) форму.