使用 style= "position..." 时图像丢失标题

Question

我正在创建一个家谱网站，每个页面都有一个由家庭成员照片包围的一个家庭的组织流程图。

我使用带有左坐标和顶部坐标的style='position:absolute'来定位页面上的图片。现在我试着在每张图片的底部添加一个标题，当我把它放在我想要的位置时，它将与图片保持一致。

我尝试了不同的代码和方法，发现这个代码有效，但前提是我删除了HTML中的定位代码。一旦我包括了定位，带标题的框就会回到左上角。图片将被战略性地放置在页面上，所以我需要定位代码。

这是我找到的代码（由jsFiddle提供），它在图片周围放了一个框，下面的标题是：

CSS：

.image {
  display: inline-block;
  margin: 10px;
  padding: 5px;
  border: 10px solid white;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
}
.image img, .image span {
  display: block;
}
.image span {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
  font-family: arial;

HTML:

<div class="image">
<a href="Family tree_files/DSRM 2011.jpg">
<img alt="dsrm2011" src="Family tree_files/DSRM 2011.jpg" 
style= "position: absolute; left:100px; top:85px;" width="208" height="461" /></a>'<span class=caption">Doug 2011</span>

有人能帮我编码一下吗？这样照片就可以放在我放它的地方，并带有标题？

Answer 1

您似乎在自己移动图像坐标。试着用ID制作一个，而不是将位置指定给div，将图像和标题放在div中，它们会和谐地移动在一起，如果你需要一个代码示例，请注释！