Html 使用z索引将Div置于Div之上

我的HTML中有以下div：

<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>

基本上，我有一个显示背景图像的Div，我会在上面有一个透明的Div。当前的代码是有效的，但我的问题是当我试图从顶部向下移动content div时

例如，当我添加边距顶部时：100px，它也会降低图像。我想如果它不在同一个z-指数上，它不会碰到它？为什么添加边距也会使bgimage div下降

---

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

z-index

与定位无关：它只影响元素的渲染顺序

Position:relative

告诉浏览器在元素应该所在的位置渲染元素，并将其偏移最后的

左

、

右

、

顶部

或

底部

坐标。因此，边缘、填充物等仍然会影响它

---

只有

position:absolute

才能保证位置独立性。

CSS绝对定位始终是相对于具有“position:relative”的最新祖先进行的，否则默认情况下它使用body标记。如果您包含的CSS只影响这些div，那么您的.content div将相对于.main div进行定位，但是您的.bg图像将基于标记进行定位

如果您希望.content和.bgImage都在lockstep中移动，那么您需要在div.main中添加一个“position:relative”

.bgimage { position: relative; }

.content { position: absolute; }

因此，.content将相对于.bgimage进行定位 当前CSS使.bgimage相对于文档处于相对位置

在CSS定位上看到这一点

我认为在代码中根本不需要“z-index”es或“position:absolute”——除非您有其他未向我们透露的复杂情况

要在DIV class=“main”上居中显示背景，请执行以下操作：

“中心顶部”将背景图像的中心顶部放置在其应用到的元素的中心顶部。您可能需要申请

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

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

您的预修改代码所能做的唯一一件事是我的修改代码所不能做的：

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

上述关于“z索引”和“位置”属性的部分内容是正确的，但没有提及： 您已将class=“content”元素从“流”中删除。当class=“content”元素的内容增长时，祖先元素不会增长。这是“z指数”ed元素和保留在“流动”中的元素之间的一个重要和根本区别

其他旁注：

• 具有相同z索引的元素按照它们在HTML中的顺序进行堆叠（稍后在HTML中表示它们在屏幕上绘制）
• “z索引”ing需要“位置：（绝对值）|相对值）”、“z索引：（有效值）”和IIRC（上|左|下|右）：（有效值）”将元素“从流中取出”

---

是否可以将.bgimage设置为顶部位置：0？还有，为什么不在bgimage中包装内容呢？将其设置为top:20将其设置为我要查找的内容！但我想我不需要这个，因为我有一个身体填充物，我想可以解决这个问题？我会将其编辑到CSS中。“z-index与定位无关：它只影响元素的呈现顺序”清晰且切中要害！

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;