PHP

Question

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

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

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更改，并在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关闭到标题图片之前。

图像DIV覆盖儿童DIV

PHP

CSS

1 个答案: