уйста, посмотрите этот очень простой фрагмент, чтобы проиллюстрировать мой вопрос ниже:

#container {
  position: relative;
  padding: 20px;
  border: 2px solid gray;
}

#back {
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 0;
  right: 0;
  background-color: #bbb;
}

<div class="col-sm-12" id="container">
  <div id="back"></div>
  <h1>Some Text</h1>
</div>

h1 тегпосле back элемент, в коде HTML.

Как я не меняю ееposition собственность, это должно бытьstatic, И, насколько я знаю,static элементы располагаются в соответствии с потоком страницы.

Итак ... Почему абсолютное положениеdiv показано выше его братh1?

Я ожидаю увидеть это заh1 так как это приходит первым.

Обратите внимание, что я знаю, какверный это поведение, я просто спрашиваю, почему!

Фрагмент с исправлением:

#container {
  position: relative;
  padding: 20px;
  border: 2px solid gray;
}

#back {
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 0;
  right: 0;
  background-color: #bbb;
}

/* Adding the below corrects this behaviour */

h1 {
  position: relative;
}

<div class="col-sm-12" id="container">
  <div id="back"></div>
  <h1>Some Text</h1>
</div>

… А зачем использоватьposition: relative наh1 исправляет это поведение?