html - 如何用相对位置叠加图像？

Question

我需要保持我的图像相对，以便它们位于 div 中的正确位置，但我无法使 z-index 工作!这是我的 html 代码:

<img src="images/banners/banner1.jpg" class="banner" /><br /><br />
<div id="social_cont">
    <div id="social">
    Hello!!
    </div>
</div>

这是我的CSS:

.banner {
    position: relative;
    z-index: 0;
}

#social_cont {
    text-align: center;
    z-index: 10;
}
#social {
    position: relative;
    z-index: 10;
}

目前我得到的只是横幅，然后是位于横幅下方的文本，这是为什么呢？

Answer 1

您对 z-index 的作用感到困惑。首先，让我向您介绍一个非常古老但非常好的当前版本CSS reference我从中学到了自己。

z-index 的作用是决定哪个元素将位于“顶部”如果多个元素被迫在渲染中占据相同的空间。默认情况下(除非您使用 CSS 更改某些元素的位置)，这永远不会发生。

您的问题中没有足够的信息，目前无法给您一个好的答案。如果您只想要横幅上方的 div，为什么不简单地在 HTML 中移动它们以显示在横幅之前？

更新:

看来您希望横幅作为文本的背景。这就是 CSS background 的用途:

<div id="social_cont" style="background: url(images/banners/banner1.jpg)">
    <div id="social">Hello!!</div>
</div>

您可以使用各种 CSS background-related properties调整对齐方式等。