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>

不能让div出现在其他人之下

1 个答案: