상위 div가 절대 div로 지정되고 자식 div가 절대 div로 지정되면 요소가 보이지 않게됩니다.

Question

양식 마법사가 있으며 변경 단계 버튼을 클릭 할 때 일부 전환을 구현하고 싶습니다. 내가 div을 만들고 그것의 position: relative과 overflow:hidden을 설정했고, 이제 2 divs를 추가하고 왼쪽으로 밀었습니다. 두 번째 div는 절대적인 것으로 자리 매김했습니다. 하지만 이제이 사업부는 보이지 않게되었습니다. 이 div가 부모 요소에 표시되고 숨겨진 오버플로되기를 원합니다. 어떤 아이디어가 문제를 해결하는 방법?

Fiddle

일부 CSS :

.registration { 
    overflow: hidden; 
    width: 90%; 
    margin: auto; 
} 
.registration .registration-box { 
    border: 1px solid #808080; 
    position: relative; 
} 
.registration [class*="registration-base-block"] { 
    width: 100%; 
    left: 0; 
    position: absolute; 
    -webkit-transition: left .6s; 
    -moz-transition: left .6s; 
    -ms-transition: left .6s; 
    -o-transition: left .6s; 
    transition: left .6s; 
} 
.registration .registration-base-block1.hidden-forever { 
    left: -980px; 
} 

일부 HTML :

<div class="registration"> 
    <div class="registration-box"> 
     <div class="registration-title"> 
      <div class="registration-step1">Step 1</div> 
      <div class="registration-step2 disabled">Step 2</div> 
     </div> 
     <div class="registration-base-block1 hidden-forever"> 
      <div class="registration-inside-block"> 
       <label for="txt">Textfield here: </label>   
       <div class="registration-input"> 
        <input name="txt" id="txt" type="text" maxlength="30" value="asdf"/>     
       </div> 
      </div> 
     </div> 
     <div class="registration-base-block2"> 
      <div class="registration-inside-block"> 
       <label for="txt2">Another field:</label>    
       <div class="registration-input"> 
        <input name="txt2" id="txt2" type="text"/> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

업데이트 (사람들을 위해 질문을 이해하지 못했다) :

내부 div에 트랜지션을 적용하고 왼쪽 속성을 변경하려고하므로 부모님에게 숨겨진 오버플로를 추가했습니다. overflow:hidden을 추가하지 않으면 내부에있는 양식에 애니메이션을 적용 할 수 있습니다. 양식 오버플로 부모 요소를 참조하십시오.

Answer 1

자바 스크립트를 사용하여 문제가 해결되었습니다. 페이지 함수 합 타이틀 div의 높이 및 내부 div의 높이를로드 상위에 적용 때 정확히 나타낸다 @Kiran div

$(document).ready(function(){ 
    $(".registration-box").height($(".registration-title").height() + $(".registration-base-block2").not(".hidden-forever").height()); 
});