使用z-index将一个Div放在另一个Div的顶部

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上，它不会影响到它。为什么添加边距也会迫使背景图像div向下移动呢？

我还尝试将类名为content的div设为绝对位置和z-index，但这样就无法居中。我该如何解决这个问题？

- Iacks

---

能否将.bgimage设置为top:0的位置？另外，为什么不在bgimage中包含内容？ - xandy

将其设置为top:20就是我要找的！但是我以为我不需要这个，因为我为body设置了padding，我认为它会处理这个问题？我会将其编辑到CSS中。 - Iacks

Answer 1

你的CSS应该是

.bgimage { position: relative; }

.content { position: absolute; }

因此，.content将相对于.bgimage定位，您当前的CSS使.bgimage相对于文档定位。

请参阅CSS定位上的链接。

- pixeltocode

Answer 2

z-index与定位无关，只影响元素的渲染顺序。而position: relative告诉浏览器在应该出现的位置渲染元素，并通过可能的left、right、top或bottom坐标进行偏移。因此，边距、填充等仍会影响它。

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

- zneak

---

"z-index与定位无关，它只影响元素的渲染顺序。" 简明扼要！ - Marc M.

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

"center top"将背景图像的中心顶部放置在应用它的元素的中心顶部。您可能需要应用一个样式来调整背景图像的位置，以使其更符合您的需求。

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

为了防止较窄的窗口隐藏边缘而将相同的元素调整到相同位置（如果“视口”比背景的尺寸小，则这将改变元素的呈现方式）。

你的未修改代码唯一能做到的事情是：

• 使用css的“宽度”和“高度”属性裁剪背景图像（如果它不是本机1024px x 768px）
• 如果class="main"元素已经设置了背景图像，则大多数浏览器不支持在同一元素上堆叠多个背景的CSS3

关于上面提到的“z-indexing”和“position”属性，有些内容是正确的，但没有提到：

你已经将class="content"元素从“流”中取出。祖先元素不会随着class="content"元素的内容增长而增长。这是“z-indexed”元素和保持“在流”元素之间的重要且根本性的区别。

其他注意事项：

• 具有相同z-index的元素按照它们在HTML中的顺序堆叠（在HTML中后面的元素意味着它们在屏幕上绘制在上面）
• “z-indexing”需要“position: (absolute|relative)”，“z-index: (valid value)”和IIRC“(top|left|bottom|right): (valid value)”将元素“取出流”

- David

Answer 4

CSS绝对定位始终是相对于最近的具有“position: relative”属性的祖先元素进行定位，否则默认使用body标签。如果您包含的CSS是影响这些div的全部内容，则.content div将相对于.main div定位，但.bgImage将基于标签进行定位。

如果您希望.content和.bgImage同时移动，则需要在div.main中添加“position: relative”属性。

- Marc B