0

Не могу понять почему div с position absolute, который стоит в потоке первым не накладывается на h1 с position relative?

Если задать position=absolute то элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.

Соответственно в потоке идут h1 и span, которые браузер обрабатывает и потом сверху них помещает элемент с position=absolute. (если я правильно понимаю - то у position=absolute z-index как бы виртуально больше остальных элементов.)

Но почему тогда виден h1 с position=relative - ведь он из потока браузера не вынимается? (если span задать position=relative - то мы его тоже увидим)

При этом span с position static ведет себя ожидаемо - скрыт под элементом с position absolute.

Меня интересует не изменение приведенного кода, а объяснение того, почему виден h1 с position = relatibe

.block {
  position: relative;
  width: 300px;
  height: 300px;
  color: #fff;
}

h1 { position: relative;}
span { position: static;}


.before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: blue;
}
<div class="block">
  <div class="before">***</div>
  <br>
  <h1>Заголовок</h1>
  <span>Тут будет описание чего-то</span>
</div>

2
  • Думается мне всё дело в z-index либо абсолютный блок уберите в конец
    – Nilsan
    11 сен 2019 в 14:36
  • Я пытаюсь понять и объяснить почему видна надпись "Заголовок". Т.е. вопрос не в изменении кода, а в понимании того, почему с точки зрения стандартов CSS надпись "Заголовок" видна (в то время как текст "Тут будет описание чего-то" - не виден и почему не виден я написал) 11 сен 2019 в 20:00

2 ответа 2

2

Уберите позиционирование блоков h1 и span. Тогда блок before будет расположен поверх h1 и span. пример:

.block {
  position: relative;
  width: 300px;
  height: 300px;
  color: #fff;
}

h1,
span{
  color: black;
}


.before {
  position:absolute;
  opacity: 0.8;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: blue;
}

подробнее об позиционировании и "почему так?" вы можете прочитать здесь

1
  • Анатолий спасибо, но я писал что с position = static (по умолчанию) все выглядит ожидаемо и надписи скрыты. У меня проблема в том что я не понимаю почему если указать position=relative - то надпись становится видна. Т.е. вопрос не в изменении кода - а в том как понять опираясь на стандарты CSS почему виден блок h1 12 сен 2019 в 7:57
2

Ответ находится в документации тут:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

В данной статье написано что при отрисовке браузер сначала рисует непозицонированные элементы (это элементы с position=static, при этом position=static идет по умолчанию)

Далее идет отрисовка позиционированных элементов (всех остальных)

Поскольку элементы h1 и div.before - позиционированные элементы - то они рисуются после span.

h1 в потоке стоит после div - поэтому показывается.

Ваш ответ

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

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