Div使用z-index除以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上,我认为它不会碰它？为什么添加边距也会迫使bgimage div下降？

我也尝试用内容类来制作div的绝对位置和zindex,但是这不会居中.我该怎么解决这个问题？

Answer 1

你的CSS应该是

.bgimage { position: relative; }

.content { position: absolute; }

所以.content将相对于.bgimage定位,你当前的CSS会使.bgimage相对于文档的位置.

看到这个关于CSS定位的链接

Answer 2

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

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