css - 为什么 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 属性。 float 元素会将其移出流程，因此 div#page_content_back 中没有任何内容可以赋予它任何高度。从内部 div 中删除 float: left 属性，您会看到图像出现在它后面。从那里，您可以在嵌套的 div 之后添加其他元素，图像将扩展以封装新元素。也就是说，如果您使用 float 或 position: absolute，您将从流中删除该元素，结果该背景图像将不会响应它的存在。