z-index абсолютно позиционированный элемент под относительно позиционированным

Я пытаюсь поместить абсолютно позиционированный элемент под относительно позиционированный. Синее поле ДОЛЖНО быть расположено относительно из-за ограничений в разработке сайта.

Представьте, что речевой пузырь — это синяя рамка, а хвост пузыря — это псевдоэлемент :after. Мне нужно, чтобы зеленая рамка располагалась за ними обоими, так как она содержит фон для этих двух элементов.

div.layer01 {
    background-color: blue;
    position: relative;
    z-index: 10;
}
div.layer01:after {  /* This is the tail of the bubble */
    display: block;
    background-color: red;
    content: '\00a0';
    width: 30px;
    height: 30px;
    position: absolute; 
    right: 20px;
    top: 50px;
    border: 3px #fff solid;
}    

/* This should be behind the tail and the blue box (bubble) */
div.layer01 div.layer02 { 
    background-color: green;
    width: 320px;
    height: 125px;
    display: block;
    position: absolute; 
    z-index: 5;
}
<div class="layer01"> <!-- speech bubble -->
    <div class="layer02">Why isn't this below the blue?</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non dolor quis leo malesuada pharetra at in massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

ИСПРАВИТЬ:

Взял элемент, который я хотел расположить, из относительно позиционированного элемента, а затем обернул содержимое в новый div. Добавляет разметку, но, похоже, это был единственный способ.


css z-index css-position
person beingalex    schedule 15.05.2012    source источник
comment
Вы не можете разместить элемент ниже его контейнера. Переосмыслите планировку.   -  person lorenzo-s    schedule 15.05.2012
comment
Джаред ответил правильно. Прислушайтесь к его совету и реорганизуйте свою разметку. Для получения дополнительной информации о z-index см.: timkadlec.com /2008/01/подробный обзор стека в CSS   -  person Faust    schedule 15.05.2012
comment
Ответ Джареда неверен и полностью зависит от неверного утверждения, что подход здравого смысла плохо определен. Не играйте в хакерские игры, когда в них нет необходимости.   -  person John Haugeland    schedule 16.10.2014

Ответы (2)


arrow_upward
6
arrow_downward

Правка: меня дезинформировали, отрицательные индексы были введены в CSS2.1. Это решение по-прежнему верно, хотя мои комментарии о том, что это взлом, неверны.

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

Хак состоит в том, чтобы удалить свойство z-index из родительского элемента и присвоить дочернему элементу отрицательный z-index.

http://jsfiddle.net/uZdy3/1/

div.layer01 {
    background-color: blue;
    position: relative;
}
div.layer01:after {  /* This is the tail of the bubble */
    display: block;
    background-color: red;
    content: '\00a0';
    width: 30px;
    height: 30px;
    position: absolute; 
    right: 20px;
    top: 50px;
    border: 3px #fff solid;
}    

/* This should be behind the tail and the blue box (bubble) */
div.layer01 div.layer02 { 
    background-color: green;
    width: 320px;
    height: 125px;
    display: block;
    position: absolute; 
    z-index: -5;
}

Однако было бы намного лучше реорганизовать макет, чтобы избежать этого взлома.

person JaredMcAteer    schedule 15.05.2012
comment
z-индексы не должны иметь отрицательных значений, и поведение не гарантируется в разных браузерах. - person JaredMcAteer; 15.05.2012
comment
Я посмотрю на рефакторинг кода. Спасибо за ответ. - person beingalex; 15.05.2012
comment
Это не взлом, и поведение гарантировано во всех браузерах. Ответ хозяина неверный. Отрицательные Z-индексы недопустимы в CSS2, но они допустимы в CSS2.1, который вышел примерно за год до того, как был написан этот ответ. Они поддерживаются всеми основными браузерами вплоть до IE4, оригинального Chrome, Firefox 4, оригинальной Opera и оригинального Safari. developer.mozilla.org/en-US/docs/Web/ CSS/z-индекс - person John Haugeland; 09.10.2014
comment
Должным образом отмечено обновление в CSS2.1, однако мое решение по-прежнему верно. - person JaredMcAteer; 09.10.2014
comment
Многие нежелательные решения строго законны согласно спецификации. Однако оправдывающим доводом в пользу того, чтобы делать что-то именно так, а не так, как предлагает язык, является ложное представление о том, что прямой путь в некотором роде является хаком, что на самом деле не соответствует действительности. Никогда не было момента, когда CSS2 сказал бы, что это плохая идея. В то время как ваша стратегия реализации является законной, ответ, который вы дали, использует ложные данные для поддержки своего подхода, что приводит к радикально нежелательной чрезмерно сложной стратегии, требующей объяснения (что большинство назвало бы взломом). - person John Haugeland; 11.10.2014

arrow_upward
2
arrow_downward

Правильный ответ, который был безопасным и законным, начиная с CSS2.1 в середине 2011 года, заключается в использовании отрицательного Z-индекса. Это поведение хорошо поддерживается во всех основных браузерах, начиная с оригинального Chrome, оригинального Safari, оригинальной Opera, IE4 и Firefox 3. Последний браузер, поддерживающий это, появился в 2008 году.

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

person John Haugeland    schedule 08.10.2014