Баг в ФФ с 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. Однако не все так радужно: опера и ИЕ дружно отказались понимать корректную(?) форму. |
| Часовой пояс GMT +3, время: 05:43. |