Абсолютное позиционирование CSS требует относительного положения для элемента sibling

Question

У меня есть простая настройка, где у меня есть меню стиля гамбургера, которое позволяет использовать меню холста (something like this), которое перемещает основное содержимое справа.

<div class="layout-wrapper" > 
    <div class="layout-menu"></div> 

    <header class="layout-header"></header> 

    <div class="layout-content"></div> 
</div> 

У меня есть контейнер div: layout-wrapper.

У меня есть меню: layout-menu, с абсолютным позиционированием, чтобы я мог разместить основное содержимое поверх него.

У меня есть заголовок: layout-header, с фиксированным позиционированием так, что она всегда будет оставаться на вершине, когда я прокручиваю содержание

У меня есть содержание: layout-content.

Моя проблема в том, что layout-content не отображается, если я не добавлю к нему position: relative. Почему я должен это делать? Я сделал глупую ошибку?

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

Answer 1

Проблема заключается в том, что .layout-menu является позиционируемый элемент:

.layout-menu { 
    position: absolute; 
} 

Но .layout-content нет:

.layout-content { 
    position: static; /* default value */ 
} 

Согласно CSS 2.1 spec,

Каждая коробка принадлежит к одному стековый контекст. Каждый ящик в заданном стекировании имеет целочисленный уровень стека, который является его позицией по оси z относительно других блоков в том же контексте стекирования. Коробки с большим уровнем стека всегда форматируются перед ящиками с нижними уровнями стека . [...]

Каждый контекст укладки состоит из следующих уровней укладки (от задней стенки к передней):

1. фона и границы элемента, образующего штабелирования контекст.
2. контексты стекирования потомков с отрицательными уровнями стека.
3. уровень стекирования, содержащий потоковые потомки без потокового уровня.
4. уровень укладки для поплавков и их содержимого.
5. уровень стекирования для потоковых потомков на поточном уровне.
6. уровень стекирования для позиционируемых потомков с «z-index: auto» и любыми стеками стека потомков с «z-index: 0».
7. контексты стекирования потомков с положительными уровнями стека.

Это означает, что .layout-menu, которая падает на уровне штабелирования 6, будет отображаться перед .layout-content, которая падает на уровне штабелирования 3.

Однако, если вы используете

.layout-content { 
    position: relative; 
} 

Теперь .layout-content также упадет на уровне укладки 6.

Затем

коробки с одинаковым уровнем стека в контексте укладки укладывают спиной к передней в соответствии с документом для того дерева.

Поэтому, так как .layout-content приходит после .layout-menu в дереве документа, .layout-content будет отображаться перед .layout-menu.

Answer 2

Это происходит потому, что элемент должен иметь position имущества, кроме static (, который по умолчанию) для z-index свойство работать. Это означает, что он будет работать не только с position: relative. он также будет работать с position: absolute и position: fixed.

Give this a read to understand z-index better

Answer 3

Это не ошибка, вы должны установить position: relative для layout-content поэтому он может перекрываться layout-menu.

В вашем примере меню «Без холста» также содержится position: relative.