html - CSS - 防止元素被推

Question

如何防止 div 中的元素相互插入，我隐藏了进度条，直到调用事件 (drop)，并且我的 img 菜单始终可见

例子:

如您所见，我的进度条正在下推我的 img 菜单，我希望它们都在我的 div 中

我该如何解决这个问题？

代码:

<div class="container2">
    <h2>Foto en toga</h2>
    <div class="PhotoContainer">
        <div class="drop" id="d1">
            <?php include ('inc/progressbar.php'); ?>
            <?php include ('inc/imagemenu.php'); ?>
        </div>
    </div>

进度条.php :

<div class="progress progress-striped active">
            <div class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                <span class="sr-only">0% Complete</span>
            </div>
        </div>

图像菜单.php:

<div class="imgmenu">

<div class="btn btn-default custombtnview">
    <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</div>

<div class="btn btn-default custombtnremove">
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>

CSS:

.drop{
border:4px dotted #bdc3c7;
padding:20px;
margin-bottom:20px;
width:200px;
height:290px;
float: left;
margin: 20px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.imgmenu {

width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 140%;


}

.imgview {
float: left;
width: 50%;
text-align: center;
background-color: aqua;
}

.imgclear {
float: left;
width: 50%;
text-align: center;
background-color: blueviolet;
}

.progress {
margin-top: 70%;
left: 0;

}

Answer 1

对于这种需求，您可以使用绝对定位的元素。

只需要记住几件事..

1. 要使 position:absolute 起作用，应设置父元素的 position(static 以外的任何值( default)) 否则它将采用具有位置设置的第一个祖先的位置，如果没有，则默认情况下将 body 的位置作为 anchor 。
2. 要将元素设置到特定位置，您可以使用属性 left、right、top、bottom.