2

Читал материалы по z-index и решил проверить одну интересную вещь. Чтобы элемент вышел за своего родителя по оси Z назад.

Из материала Хабра:

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

Вот сделал что-то за примером. Тэг html у нас получается контекстом. Соответственно тэг body располагается в нем, так же как и блок внутри .under_parent, не являясь корневым элементом этого контекста. Но все равно не работает, и то ли сути не уловлю, то ли не пойму почему.

body{
    background: rgba(33, 33, 33, 0.7);
}
.under_parent{
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
    z-index: -1;
}
<body>
    <div class="under_parent"></div>
</body>

1
  • Отличный вопрос! Мне тоже любопытно, поэтому я задал похожий вопрос на английском сайте: stackoverflow.com/q/32109258/546661 20 авг 2015 в 5:44

1 ответ 1

2

Дело в том, что если нет определенного background элемента <html>, то берет background от элемента <body>. В спецификации CSS 2.1 §14.2 (простите, не нашел перевод) написано так:

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

Значит, ваш пример работает то же самое, как и в этом примере:

html {
    background: rgba(33, 33, 33, 0.7);
}
.under_parent{
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
    z-index: -1;
}
<html>
  <body>
    <div class="under_parent"></div>
  </body>
</html>

Если там разные background'ы для <html> и <body>, то работает нормально:

html {
  background: white;
}
body {
  background: rgba(33, 33, 33, 0.7);
}
.under_parent {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  z-index: -1;
}
<html>
  <body>
    <div class="under_parent"></div>
  </body>
</html>


Содержимое этого ответа взято от подобного ответа на английском сайте. Спасибо большое, Alohci.

1
  • Никогда не додумался бы, что проблема кроется в background-ах:) Очень благодарен!
    – Oleg
    20 авг 2015 в 7:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.