图片DIV覆盖儿童DIV

Question

我有一个简单的程序，可以将图像从数据库中回显到页面。我想要一个子元素，只是一个简单的透明框，显示在图像的顶部。

我知道子元素总是比父元素有更高的z-index，但图像总是覆盖我想要的顶部框。当页面正在加载时，我可以看到我想要的位置的框，但是当图像加载并且框消失时。

这里是一个的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

这里是一个工作JS提琴： http://jsfiddle.net/XKHZv/3/

我做了一些变化的CSS和也移动了一个div e标题图片。

这是你的新的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; 
} 

那么你也有标题PIC前一个div收盘移动。