Question

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

在中间，我想要一张背景图片（羊皮纸）封面，然后在那张羊皮纸上面，我想要一个带有左列和右列的文本的白色图层。我无法使用相对位置使其工作，因为我的z-index似乎不起作用。如果我把位置＆＃34;固定＆＃34;，我就不能再使用正确的浏览器滚动了。如果我使用position＆＃34; absolute＆＃34;，那么背景是正确的，顶部的内容是可以的，但我的导航页脚消失了。如果我使用位置＆＃34; relative＆＃34;，我的导航系统很好，但背景不再显示。它忽略了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，则会从流中移除该元素，并且该背景图片不会因此而响应其存在。

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

1 个答案: