Почему мой элемент с позицией: абсолютный всегда отображается под позицией: относительные элементы? - PullRequest
Новая
       12

Почему мой элемент с позицией: абсолютный всегда отображается под позицией: относительные элементы?

3 голосов
/ 23 февраля 2009

Это все в вопросе, но вот простой пример 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <title>TEST</title>
</head>
<body style="margin:0;padding:0">

<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
    <div style="position:relative">
        <span style="position:absolute;display:block;height:250px;width:250px;background:green;z-layer:2"><br /><br />Should be on top</span>
    </div>
    <span style="position:relative;display:block;width:500px;background:blue;z-layer:1">Actually on top</span>
</div>

</body>
</html>

Ответы [ 2 ]

11 голосов
/ 23 февраля 2009

вместо "z-layer" используйте "z-index"

также абсолютный интервал в относительном делении без z-индекса

Вот правильный HTML: 

<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
    <div style="position:relative;z-index:2">
        <span style="position:absolute;display:block;height:250px;width:250px;background:green"><br /><br />Should be on top</span>
    </div>
    <span style="position:relative;display:block;width:500px;background:blue;z-index:1">Actually on top</span>
</div>
3 голосов
/ 23 февраля 2009

Это происходит потому, что при позиционировании элемента «абсолютно» он удаляется из потока документа в объектной модели документа, поэтому элементы, которые остаются в потоке документа, отображаются «над» удаленным элементом. Для кросс-браузерной совместимости поместите настройки z-index в родительский элемент абсолютно позиционированного элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...