为什么使用背景封面图像在相对位置忽略 CSS z-index？

Question

概述：我的页面顶部有一个纯 CSS3 导航系统。我在底部有页脚/版权。

在中间，我想要一个背景图像（羊皮纸）封面，然后在该羊皮纸的顶部，我想要一个带有左栏和右栏的白色文本层。我似乎无法使用相对位置使其工作，因为我的 z-index 似乎不起作用。如果我将位置“固定”，我将无法再使用正确的浏览器滚动向下。如果我使用位置“绝对”，那么背景是正确的，顶部的内容是好的，但我的导航页脚消失了。如果我使用“相对”位置，我的导航系统很好，但背景不再显示。它忽略了 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 中没有任何内容可以赋予它任何高度。从内部 div 中删除 float: left 属性，您将看到图像出现在它后面。从那里，您可以在嵌套的 div 之后添加其他元素，图像将展开以封装新元素。也就是说，如果您使用 float 或 position: absolute，您将从流中删除该元素，因此该背景图像将不会响应它的存在。