php - 图像 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 更改，还在 titlepic 之前移动了一个 div。

这是您的新 .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 移到标题图片之前。