Почему CSS z-index игнорируется в позиции относительно фонового изображения?

Question

Обзор: у меня сверху чистая навигационная система CSS3. У меня есть нижний колонтитул / авторские права в нижней части.

В середине я хочу обложку фонового изображения (пергамент), затем поверх этого пергамента я хочу белый слой для текста с левым столбцом и правым столбцом. Я не могу заставить его работать, используя относительную позицию, так как мой z-index не работает. Если я установлю положение "исправлено", я больше не смогу использовать правильную прокрутку браузера, чтобы перейти вниз. Если я использую положение "absolute", то фон будет правильным, а содержимое сверху - в порядке, но нижний колонтитул навигации исчезнет. Если я использую положение "относительный", моя навигационная система в порядке, но фон больше не отображается. Это игнорирование z-index....

Странно то, что я использую выражение web 4, и там оно выглядит правильно... в Интернете это выглядит не совсем правильно.

Это мой сайт HTML, чтобы воспроизвести то, что я вижу.

<!-- #BeginEditable "content" -->
<div id="page_content_back">
    <div id="column_left">
        <h1>About</h1>

        <p>We are the best-Trust us</p>


    </div>
    <div id="column_right">
        <h4>CONTACTS</h4>
    </div>          
</div>
<!-- #EndEditable -->

Это мой css

#page_content_back {
position: relative;
background-image:url('../images/grayparchment_back.jpg');
background-size: cover; 
z-index: 1;
width: 100%;
margin: auto;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
}
#column_left {
position: relative;
margin: 0 50px;
padding: 0 2%;
z-index: 2;
top: 0px;
background-color: #fff;
float: left;
width: 65%;
height: 100%;   
color: #393939;
}
#column_right {
position: absolute;
z-index: 3;
float: right;
right: 50px;
top: 370px;
width: 20%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
}

Answer 1

Хорошо, проблема в вашем div#column_left. Оно имеет float: left имущество. Плавающий элемент выводит его из потока, поэтому внутри div#page_content_back дать ему любую высоту. Удалить это float: left свойство из внутреннего div, и вы увидите изображение появляется за ним. Оттуда вы можете добавить другие элементы после этого вложенного div, и изображение расширится, чтобы инкапсулировать новый элемент. Тем не менее, если вы используете float или же position: absoluteВы удаляете элемент из потока, и в результате фоновое изображение не будет реагировать на его присутствие.