Почему позиция абсолютная отображается выше позиции статической?

У меня есть простой абсолютный div и другой нормальный div. Почему абсолютный div отображается выше другого?

Я знаю, что могу исправить это с помощью z-index - Но в чем причина?

<style>
    .with-absolute {
      position:absolute;
      top:0px;
      bottom:0px;
      background-color:red
    }
    .other {
      background-color:yellow;
    }
  </style>
   </head>
<body>
  <div class="with-absolute">Hello</div>
  <div class="other">Why is this not on top? It comes last</div>
</body>

Ответ 1

Абсолютные:

Это означает, что вы можете поместить его в любом месте, и это не повлияет на какой-либо другой элемент потока или не пострадает от него.

В отличие от статических и относительных значений, абсолютно нормальный элемент удаляется из нормального потока.

Вот пример кода:

#box_1 { 
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: #ee3e64;
}
#box_2 { 
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: #44accf;
}

DEMO из документа Noah Stokes.

Очевидно, что здесь Noah Stokes DOCUMENT о позиционировании css

Ответ 2

absolute Элемент расположен относительно его первого положения (не статический) элемент предка

Ссылка.

В модели абсолютного позиционирования ящик явно смещен с относительно его содержащего блока. Он удаляется из нормального потока полностью (он не влияет на более поздних братьев и сестер). Абсолютно позиционированный блок устанавливает новый содержащий блок для нормального потока дети и абсолютно (но не фиксированные) позиционированные потомки. Однако содержимое абсолютно позиционированного элемента не течет вокруг любых других ящиков. Они могут скрывать содержимое другой коробки (или быть затененными), в зависимости от уровней стека перекрывающиеся поля.

Ссылка.

Ответ 3

Порядок окраски элементов определяется спецификацией CSS 2.1, E.2 Порядок рисования

Статические позиционированные элементы окрашиваются на этапах с 4 по 7. Абсолютные позиционированные элементы с z-индексом 0 окрашены на этапе 8, поэтому всегда находятся на вершине.

Ответ 4

Обычно значение по умолчанию для z-индекса абсолютных элементов равно 0, которое находится выше статической позиции. Если вы хотите переместить его позади, установите z-index на -1.

Ответ 5

Все статические элементы имеют по умолчанию z-index (auto), что означает, ноль.

Только логическое объяснение, которое у меня есть, заключается в том, что когда вы добавляете элемент position: relative|absolute|fixed к элементу, вы помещаете его вне потока документа, а затем становитесь z-индексом 1.