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>

progressbar.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>

imagemenu.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

您可以使用absolute定位元素来满足此类要求。

要记住的一些事情......

1. 要使position:absolute生效，应设置父元素的position（static以外的任何内容（默认）），否则它将会获取具有位置设置的第一个祖先的位置，如果没有，则默认情况下body的位置被视为锚点。
2. 要将元素设置为特定位置，您可以使用属性left，right，top，bottom。