div 내용 확장시 페이지 정렬 변경

Question

내 웹 페이지에서 일부 div가 숨겨져 있습니다. 해당 내용은 해당 확인란이나 라디오 버튼을 클릭했을 때만 표시됩니다. 그러나 그런 경우 내 페이지 정렬이 변경됩니다. 양식 필드는 그 아래의 요소와 병합됩니다. 어떻게 이것을 피할 수 있습니까?

코딩이 HTML, CSS 및 자바 스크립트로 완료되었습니다.

코드 샘플 :

<div id ='passenger1"> 
    <div class="passenger-selection> 
     <input type="radio">Book for me</input> 
     <input type="radio">Book for my family</input> 
     <input type="radio">Book for others</input> 
    </div> 
    <div class="form_ui"> 
    <!-- Fields for myself --> 
    <div class="myself1"> 
     Title: 
      <select> 
       <option value="1" selected>Mr.</option> 
       <option value="2">Ms.</option> 
       <option value="3">Mrs.</option> 
      </select> 
     Name: 
      <input type="textbox"> 
     <input type="checkbox"/> 
         This passenger is above 18 years old. 
     // A few more textboxes too.. 

     </div> 

     <!-- Fields for family --> 
    <div class="family1" class="hidden"> 
     Title: 
      <select> 
       <option value="1" selected>Mr.</option> 
       <option value="2">Ms.</option> 
       <option value="3">Mrs.</option> 
      </select> 
     Name: 
      <input type="textbox"> 
     <input type="checkbox"/> 
         This passenger is above 18 years old. 
     // on clicking this chk box, a few more text fields are displayed 

     <div id="details" class="hidden"> 
       Date of Birth: 
      <input type="textbox"> 
       Passport Number: 
      <input type="textbox"> 

     </div> 
     </div> 

    <!-- Fields for others --> 
     <div class="others1" class="hidden"> 
     Title: 
      <select> 
       <option value="1" selected>Mr.</option> 
       <option value="2">Ms.</option> 
       <option value="3">Mrs.</option> 
      </select> 
     Name: 
      <input type="textbox"> 
     <input type="checkbox"/> 
         This passenger is above 18 years old. 
     // A few more textboxes too.. 

     </div> 


    </div> 
</div> 

<div id="passenger2"> 
     //Same as passenger1 
</div> 

<div id="passenger3"> 
     //Same as passenger1 
</div> 

<div id= "contactInfo"> 
    Email:<input type="textbox"/> 
    Phone No:<input type="textbox"/> 
</div> 

CSS :

.hidden{ 
    display: none; 
    } 

나는, 라디오 버튼을 클릭하여 자신 또는 가족이나 다른 사람의 사업부 중 하나 경우

가 표시됩니다. 가족 용 div 안에는 체크 상자를 클릭하면 두 개의 텍스트 상자로 나타나는 "세부 사항"이라는 다른 div가 있습니다. 그래서 내가 3 명의 승객 div 모두를위한 chkbox를 클릭하면, passenger3 div가 그 아래에있는 연락처 정보 div와 병합됩니다.

Answer 1

위에 표시 할 컨트롤의 클래스를 수정해야합니다. 클래스에 z-index: 10;을 추가하고 checkbox 또는 radiobutton을 선택하여 나중에 표시 할 div (family1)를 표시하십시오.

처음에 div를 표시하는 클래스에 z-index:1;을 추가해야 할 수도 있습니다. 즉, myself1