CSSは -

Question

がどのようにお互いを押してからのdiv内の要素を防ぐことができます押してから要素を防ぐため、私は私のプログレスバーが呼び出されたイベント（ドロップ）まで隠されていて、私の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要素を配置することができます。

だけposition:absoluteが機能するためには...

1. を覚えておくべきいくつかのことは、親要素のpositionを設定する必要があります（static以外（デフォルト））、またはそうでなければかかります位置が設定されている最初の祖先の位置であり、デフォルトでは、bodyの位置がアンカーとみなされます。
2. 要素を特定の場所に設定するには、属性left,right,top,bottomを使用できます。