使用 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 相对于文档的位置。

请参阅有关 CSS 定位的链接

Answer 2

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

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

“center top”将背景图像的中心顶部放置在其所应用到的元素的中心顶部。您可能希望将 a 应用于

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

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

你的预修改代码唯一可以做的事情是我的修改后的代码不能做的：

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

关于“z-indexing”和“position”属性的一些说明是正确的，但未能实现提到：
您已将 class="content" 元素从“流程”中取出。当 class="content" 元素的内容增长时，祖先元素不会增长。这是“z 索引”元素和保持“流中”元素之间的重要且根本的区别。

其他附注：

• 具有相同 z-index 的元素根据其在 HTML 中的顺序进行堆叠（HTML 中的后面意味着它们在屏幕上方绘制）
• “z-index”需要“位置：（绝对|相对）” 、“z-index: (valid value)”和 IIRC “(top|left|bottom|right): (valid value)” 将元素“从流中取出”

Answer 4

CSS 绝对定位始终“相对”于具有“position:relative”的最近祖先，否则默认使用 body 标记。如果您包含的 CSS 只影响这些 div，那么您的 .content div 将相对于 .main div 定位，但您的 .bgImage 将根据标签定位。

如果您希望 .content 和 .bgImage 同步移动，那么您需要向 div.main 添加“position:relative”。