Question

我的HTML中有以下div：

<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>

直接在我体内。

使用以下CSS：

body {
    margin: 0;
    padding: 20px 0;
}
.content {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.content {
    position: relative;
    z-index: 1;
    border: #000 thin solid;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
}
.bgimage {
    position: absolute;
    z-index: -1;
    width: 1024px;
    height: 768px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(bg1.jpg);
}

基本上，我有一个显示背景图像的Div，我会在透明度上有另一个Div。这个当前代码有效，但我的问题是当我试图从顶部取下内容div时。

例如，当我添加 margin-top：100px 时，也会降低图像。如果它不在同一个z-index上，我认为它不会碰它？为什么添加边距也会迫使bgimage div下降？

我也尝试将内容类的div设为绝对位置和zindex，但这不会居中。我该怎么解决这个问题？

Answer 1

你的CSS应该是

.bgimage { position: relative; }

.content { position: absolute; }

所以.content将相对于.bgimage定位您当前的CSS使得相对于文档的.bgimage位置。

在CSS定位上查看此link

Answer 2

z-index与定位无关：它只影响元素的渲染顺序。 Position: relative告诉浏览器在应该的位置呈现元素，并将其偏移到最终left，right，top或bottom坐标。因此，边距，填充等仍会影响它。

只有position: absolute才能保证位置独立。

Answer 3

我认为你的代码中根本不需要“z-index”或“position：absolute” - 除非你有其他的并发症，你没有透露给我们。

将背景居中于DIV class =“main”：

body{margin:0;padding:20px 0;}
.main{background:transparent url(bg1.jpg) no-repeat center top;}
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;}

“中心顶部”将背景图像的中心顶部放置在应用元素的中心顶部。您可能想要应用

min-width:1024px;_width:1024px;

到同一个元素 - 防止较窄的窗口隐藏边缘（如果“视口”比背景的尺寸窄，这将改变元素的渲染方式）。

你修改后的代码所能做的预修改代码是唯一的：

使用css“width”和“height”属性裁剪背景图像（如果它本身不是1024px x 768px）
如果class =“main”元素已经有背景图像集，大多数浏览器都不支持在同一元素上堆叠多个背景所需的CSS3

上面提到的关于“z-indexing”和“position”属性的一些内容是正确的，但未提及：你已经从“流程”中取出了你的class =“content”元素。当class =“content”元素的内容增长时，祖先元素不会增长。这是“z-index”ed元素和保持“在流程中”的元素之间的重要和基本区别。

其他旁注：

具有相同z-index的元素根据它们在HTML中的顺序堆叠（稍后在HTML中表示它们在屏幕上方绘制）
“z-index”需要“position :(绝对|相对）”，“z-index :(有效值）”和IIRC“（top | left | bottom | right）:(有效值）”to采取“流出”的要素

Answer 4

CSS绝对定位始终与具有“position：relative”的最新祖先“相对”完成，否则默认情况下使用body标记。如果您包含的CSS全部影响这些div，那么.content div将相对于.main div定位，但您的.bgImage将根据标记定位。

如果你想让.content和.bgImage同步移动，那么你需要在div.main中添加一个“position：relative”。

Div使用z-index除以Div

4 个答案: