使用 z-index 在 Div 之上的 Div答案

【问题标题】：Div on top of Div using z-index使用 z-index 在 Div 之上的 Div
【发布时间】：2011-02-01 10:28:16
【问题描述】：

我的 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，但是这不会居中。我该如何解决这个问题？

【问题讨论】：

是否可以将 .bgimage 设置为 top:0 的位置？还有，为什么不在 bgimage 中包装内容？
将其设置为 top:20 将其置于我正在寻找的位置！但我认为我不需要这个，因为我有一个我认为可以解决这个问题的身体填充物？我会将其编辑到 CSS 中。

标签： html css margin z-index

【解决方案1】：

你的 CSS 应该是

.bgimage { position: relative; }

.content { position: absolute; }

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

在 CSS 定位上看到这个link

【讨论】：

【解决方案2】：

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

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

【讨论】：

"z-index 与定位无关：它只影响你的元素的渲染顺序"明确且切中要害！

【解决方案3】：

我认为您的代码中根本不需要“z-index”es 或“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”元素和保持“在流中”的元素之间的一个重要且根本的区别。

其他附注：

具有相同 z-index 的元素根据它们在 HTML 中的顺序堆叠（在 HTML 后面表示它们被绘制在屏幕上方）
“z-index”需要“position: (absolute|relative)”、“z-index: (valid value)”和 IIRC “(top|left|bottom|right): (valid value)”将元素“排除在外”

【讨论】：

【解决方案4】：

CSS 绝对定位总是相对于最近的具有“位置：相对”的祖先进行，否则默认使用 body 标签。如果您包含的 CSS 会影响这些 div，那么您的 .content div 将相对于 .main div 定位，但您的 .bgImage 将基于标签定位。

如果您希望 .content 和 .bgImage 同步移动，则需要在 div.main 中添加“位置：相对”。

【讨论】：