Изображение теряет заголовок, когда используется стиль = «позиция ...»

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

Кажется, что вы сами перемещаете координаты изображения. Попробуйте сделать с идентификатором и вместо этого закрепите позицию на div, поместите изображение и подпись внутри div, и они будут перемещаться вместе в согласии, прокомментируйте, если вам нужен пример кода!