CSS는 -

Question

가 어떻게 서로를 밀어에서 사업부 내부 요소를 방지 할 수 있습니다 밀어에서 요소를 방지, 내 진행 표시 줄이 호출되는 이벤트 (드롭)까지 숨겨져 있고, 내 IMG 메뉴가 항상 표시

예 :

당신이 내 진행률 표시 줄 내 IMG 메뉴를 아래로 밀고있다 볼 수

, 나는

가 어떻게이 문제를 해결할 수 있습니다 내 사업부 내에서 둘 다 싶어?

코드 :

<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 속성을 사용할 수 있습니다.