Question

我一直在玩Beatles example jsfiddle引用的imagemapster website。有没有办法将标题div定位在图像顶部？

在上面的jsfiddle中，我试过了：

<div id="beatles-caption" style="clear:both; border:red; width:400px; 
         padding: 6px; position:relative; top:-100px;">

我也尝试过z-index，但是没有成功将标题移动到图像上。

在我自己的应用程序中，我有一个完整的页面背景图像，我需要识别图像的各个部分，这些部分叠加在图像的右上角。

鉴于这一要求，我有更好的例子吗？

Answer 1

这是你在找什么？

jsfiddle.net/nYkAG/408 /

注意：它不考虑可变高度。您可以将插件包装在容器中并设置position：relative然后从上到下更改：0。

Answer 2

您假设position:relative; top:-100px;会将图标移到图像上方是正确的。您只是错过了z-index。

#beatles-caption { position:relative; top:-100px; z-index:1000; background:white; }

您还可以使用负边距：

#beatles-caption { position:relative; margin-top:-100px; z-index:1000; background:white; }

或者将整个内容包含在标题为position:relative和position:absolute; bottom:0的div中