Форум

boda2004 · #1 (**permalink**) 13.06.2007, 15:12

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

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

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

Илья Кантор · #2 (**permalink**) 13.06.2007, 15:20

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

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

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

boda2004 · #3 (**permalink**) 13.06.2007, 15:21

тоже не так

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

Илья Кантор · #4 (**permalink**) 13.06.2007, 15:29

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

boda2004 · #5 (**permalink**) 13.06.2007, 15:35

z-index=0
во всех браузерах одинаково...
одинаково неправильно

т.е. правильно - второй див прорисовался поверх первого, но мне нужно подложить второй под первый.

boda2004 · #6 (**permalink**) 13.06.2007, 15:38

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

Илья Кантор · #7 (**permalink**) 13.06.2007, 15:55

Вот ссылка в тему
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>

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

boda2004 · #8 (**permalink**) 13.06.2007, 16:09

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

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

skl · #9 (**permalink**) 14.06.2007, 11:18

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

)

boda2004 · #10 (**permalink**) 14.06.2007, 11:52

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

<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.
Однако не все так радужно:
опера и ИЕ дружно отказались понимать корректную(?) форму.

Форум

Справочник

Discord чат

Курсы javascript