Изображение DIV Covering Child DIV

Question

У меня есть простая программа, которая эхообращает изображения на страницу из базы данных. Я хочу иметь дочерний элемент, просто простую прозрачную коробку, показанную поверх изображений.

Я знаю, что дочерние элементы всегда имеют более высокий z-индекс, чем родительский, но изображение всегда покрывает ящик сверху. Когда страница загружается, я могу видеть поле в нужном месте, но затем, когда загрузка изображений и окно исчезают.

Вот jsFiddle: http://jsfiddle.net/EBvCZ/

PHP

echo '<div id="wrapper">'; 
    while ($data = mysql_fetch_array($query_run)) {          
     echo '<div id="picback"><div id="centerpic"><a href="image.php?photo_id='.$data['photo_id'].'" title="View Photo"><'.'img src="resizeimage.php?photo_id='.$data['photo_id'].'"></a>'; 
     echo '<br style="clear:both;" />'; 
     echo '<div id="titlepic">This is an image</div>'; 
     echo '</div></div>'; 
    } 
echo '</div> 

CSS

#wrapper { 
    overflow:auto; 
    width:1000px; 
    height:1000px; 
    margin: 20px auto; 
} 

#titlepic { 
    background-color:rgba(0, 0, 0, 0.5); 
    top:100px; 
    width:200px; 
    height:35px; 
    position:relative; 
} 

#centerpic { 
    position:relative; 
    margin:auto; 
    width: 200px; 
    height: 150px; 
    top:18.75px; 
    overflow:hidden; 
} 

#picback { 
    position:relative; 
    margin:10px 23px; 
    top:75px; 
    float:left; 
    width:250px; 
    height:187.5px; 
    overflow:hidden; 
} 

#picback:hover { 
    background-color:rgb(190,190,190); 
    -webkit-border-radius:0.4em; 
    -webkit-transition: background-color 0.5s; 
} 

Answer 1

Вот это рабочая скрипка расслоения плотного: http://jsfiddle.net/XKHZv/3/

Я сделал некоторые изменения .css и также переместил один div для e the titlepic.

Вот ваш новый .css:

#wrapper { 
    overflow:auto; 
    width:1000px; 
    height:1000px; 
    margin: 20px auto; 
} 
#titlepic { 
    margin-left:auto; 
    margin-right:auto; 
    background-color:rgba(0, 0, 0, 0.5); 
    width:200px; 
    height:35px; 
    position:relative; 
    clear: both; 
} 
#centerpic { 
    position:relative; 
    margin:auto; 
    width: 200px; 
    height: 150px; 
    top:18.75px; 
    overflow:hidden; 
} 
#picback { 
    position:relative; 
    margin:10px 23px; 
    top:75px; 
    float:left; 
    width:250px; 
    height: 203.75px; 
    overflow:hidden; 
} 
#picback:hover { 
    background-color:rgb(190, 190, 190); 
    -webkit-border-radius:0.4em; 
    -webkit-transition: background-color 0.5s; 
} 

Тогда вы должны переместить закрытие Div, чтобы перед титульным рис.