Question

HTML code：

<div id="img-wrapper">
  <img src="images/1.png" title="Picture 1" class="my-img" />
  <img src="images/2.png" title="Picture 2" class="my-img" />
  <img src="images/3.png" title="Picture 3" class="my-img" />           
</div>

样式：

#img-wrapper {
position: relative;
width: 200px;
height: 100px;
}
.my-img {
display: none;
position: absolute;
top: 0;
left: 0;
}

我使用jquery来旋转图像（它工作正常）。但我希望在此图像上方显示文字。我确实尝试在img-wrapper的底部包含一个DIV。但是该文本显示在图像后面。我使用fadeIn（）和fadeOut（）来旋转时显示图像。

如何在图像上方放置div？

修改

我对代码做了一些更改。我现在使用Cycle插件根据这个问题的答案显示图像：jQuery - Image rotation gets faster when focused after the focus was on another Chrome Tab

现在，我之前显示文本的解决方案无效！：（

修改

解决上述问题：使用更高的z-index值。

Answer 1

只需设置要放置在图像上方的div的z-index：

.div-above-images {
    z-index: 1;
    position: absolute;
}

请参阅https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index

Warning! z-index only has an effect if an element is positioned.

Answer 2

您可以在＃img-wrapper之前创建div。有没有这样做的原因？

Answer 3

使用jQuery的可能解决方案是：

$('#img-wrapper').before('<div>text</div>');

Answer 4

你需要这个

$('#img-wrapper img:first').before('<div>text</div>');

jQuery - 在旋转图像上方显示文本

4 个答案: