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来调整路线，例如您想要的。

Answer 2

@Jon是对的。我相信你想要这样的东西。

http://jsfiddle.net/2EDnj/4/

Answer 3

具有position：relative的元素保持其位置，并且仍然影响所有其他后续元素。这就是为什么你的div不会仅通过使用z-index重叠图像的原因。您仍然需要使用例如：top:-100px来定位div元素，其中金额将是图像的高度。最好的方法是使用Jons答案。将图像设置为元素的背景图像。

如何叠加具有相对位置的图像？

3 个答案: