Html CSS-防止元素推送

如何防止div中的元素相互推压，我将隐藏进度条，直到调用事件（drop），并且我的img菜单始终可见

例如：

正如你所看到的，我的进度条正在按下我的img菜单，我希望它们都在我的div中

我怎样才能解决这个问题

代码：

---

对于此类需求，您可以使用

absolute

ly定位元素

只有几件事要记住

要使

位置：绝对

起作用，应设置父元素的

位置

（除

静态

（默认值）之外的任何内容），否则它将采用已设置位置的第一个祖先的位置，如果未设置位置，则默认情况下将

主体的位置作为锚定

要将元素设置到特定位置，可以使用属性

left

，

right

，

top

，

bottom

---

为图像设置位置：绝对，并相应对齐。为此创建一个JSFIDLE。@fmt您能在JSFIDLE中查看移动版本吗？我不认为是这样，那么你应该为类imagemenu尝试绝对位置。没关系，然后将使用图像作为背景的标记设置为绝对位置。之后，示例：top:200px；左/右也…我设置了我的父位置：相对（.drop）和我的.progress位置：绝对，但现在我的进度条在.drop分区后面。我发现了，我没有给我的容器一个维度，非常感谢

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

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

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

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

}