为什么CSS z索引在使用背景封面图像的相对位置被忽略？

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

在中间，我想要一个背景图像（羊皮纸）封面，然后在羊皮纸的顶部，我想要一个白色的文本层，左栏和右栏。我似乎无法使用相对位置使其工作，因为我的z索引似乎不工作。如果我将位置设置为“固定”，我将无法再使用右侧的浏览器滚动条向下移动。如果我使用位置“绝对”，那么背景是正确的，顶部的内容是可以的，但是我的导航页脚消失了。如果我使用“相对”位置，我的导航系统很好，但背景不再显示。它正在忽略z索引

奇怪的是，我使用的是ExpressionWeb4，它在那里看起来是正确的……它在web上看起来就是不正确

这是我的网站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 -->

---

好的，问题是你的div列在左边。它有一个

float:left

属性。浮动元素会将其从流中移除，因此

div#page_content_back

中没有任何元素可以赋予它任何高度。从内部div中删除

float:left

属性，您将看到图像显示在其后面。从那里，您可以在嵌套的div之后添加其他元素，图像将展开以封装新元素。也就是说，如果您使用

float

或

position:absolute

，您将从流中删除元素，因此背景图像不会对其存在作出响应。

是的，您是对的。当我将其设置为最小高度时：100px；这是伟大的工作为第一个100像素。如果我改为设置高度：100%；它又停止工作了。当我不知道页面的“高度”是多少时，我如何让它在整个页面上工作，因为我正试图用这种方式模板化整个网站？我试过高度：自动；同样如此，但这似乎产生了100%的相同结果，而且根本没有显示出来。这不起作用，因为我不想让羊皮纸成为整个html。只有网站的中间部分。但是，如果我为代码重新定义了page\u content\u（称之为page\u content\u alt），它仍然不起作用。你可以看到它在这里运行->我甚至在它周围放了一个边框来查看它，并确保图层的准确位置。现在…可能是因为我正在用IE查看它。让我去拿另一个浏览器。

#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;
}