html - 不能让一个 div 出现在其他的下面

Question

我正在尝试构建一个图片上传元素，下面有一个进度条；

这是我的html

<div id="profile_pic_box">
     <input id="fileupload" type="file" name="avatar" data-url="/php_parsers/photo_system.php" multiple>
    <img src="/myDir/user/'.$profile_id.'/'.$avatar.'" id="avatar_pic" alt="Tutor'.$id.' Profile Picture">
<div id="progress">
<div class="bar" style="width: 0%;"></div>
<div id='avatar_status'></div>
</div>
</div>

和CSS:

div#profile_pic_box{ width:200px; height:200px; margin:20px auto 0px auto; overflow-y:hidden;}
div#profile_pic_box > img{z-index:2000; width:200px;}
div#profile_pic_box > a {
    width:200px;
    height:3%;
    display: none;
    position:absolute; 
    bottom: 72%;
    left: 11%;
    z-index:4000;
    background:#F1F3F4; 
    color:6F6F78;
    border:#F1F3F4 1px solid;
    border-radius:3px;
    padding:5px;
    font-size:14px;
    text-align: center;
    text-decoration:none;
}

div#profile_pic_box > input{
    display:none;
    position:absolute; 
    z-index:3000;
    padding:10px;
    opacity:.8;
    width:inherit;
    background:#F1F3F4; 
    height:inherit;

}

div#profile_pic_box:hover a {
    display: block;
}

div#profile_pic_box:hover input {
    display: block;
}

div#profile_pic_box >div{
    font-size: 12px;
    text-align: center;
}

#avatar_pic{
    position:relative;
    float:left;
}

问题是 #progress 和 .bar 位于标签下方，因此看不到。我怎样才能让他们放下并显示在图片下方？我怎样才能让它们“堆叠”在彼此之上？

谢谢

Answer 1

试试这个。我刚刚调整了你的html。

<div id="profile_pic_box">
     <input id="fileupload" type="file" name="avatar" data-url="/php_parsers/photo_system.php" multiple>
    <img src="/myDir/user/'.$profile_id.'/'.$avatar.'" id="avatar_pic" alt="Tutor'.$id.' Profile Picture">
</div>

<div id="progress">
<div class="bar" style="width: 0%;"></div>
<div id='avatar_status'></div>
</div>