jquery - 使用 imagemapster jquery 插件重新定位标题 div

Question

我一直在使用imagemapster 网站上引用的Beatles 示例 jsfiddle。有没有办法将标题 div 放置在图像顶部？

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

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

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

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

考虑到这个要求，我有更好的例子吗？

score 1 · Accepted Answer

这是你想要的？

jsfiddle.net/nYkAG/408/

注意：它不考虑可变高度。您可以将插件包装在容器中并设置位置：相对然后将顶部更改为底部：0。

score 1 · Accepted Answer

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; }

或者将整个内容包装在一个带有标题的 divposition:relative中position:absolute; bottom:0

2 回答 2