html - 使用 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 时。

例如，当我添加 ma​​rgin-top:100px 时，也会降低图像。我以为如果它不在同一个 z-index 上它就不会碰它？为什么添加边距也会强制 bgimage div 向下？

我也尝试过将带有内容类的 div 设置为绝对位置和 zindex，但这不会居中。我该如何解决？

Answer 1

你的 CSS 应该是

.bgimage { position: relative; }

.content { position: absolute; }

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

看这个link关于CSS定位