CSS - 防止元素推

如何防止一个div内的元素从相互推搡，我有我的进度栏隐藏，直到事件（下降）被调用，我的IMG菜单始终可见CSS - 防止元素推

例如：

，你可以看到，我的进度条推了我的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; 

}

来源

2016-06-15 BrianCas

设置位置：图像的绝对值，并相应地对齐它们。 – Frutis

为此创建一个jsfiddle。 – frnt

@fmt你可以在jsfiddle里面查看手机版吗？我不这么认为 – Frutis

您可以使用absolute ly定位元素为这种要求。

短短几件事情要记住..

对于position:absolute工作，position父元素应设置（以外的任何其他static（默认）），否则将采取第一个拥有位置的祖先的位置，如果不是，则默认body的位置作为锚点。
要将元素设置到特定位置，您可以使用left,right,top,bottom的属性。

来源

2016-06-15 07:10:37

我做了我父母的位置：相对（.drop）和我的.progress位置：绝对，但现在我的进度条落后.drop div – BrianCas

算了一下，我没有给我的容器一个维度，非常感谢 – BrianCas

CSS - 防止元素推

回答

相关问题