Page alignment changes on expanding div content

In my web page, I have some of my divs hidden. Their content is displayed only of clicking the corresponding checkboxes or radio buttons. But in such case my page alignment changes. The form fields merge with the element below them. How do I avoid this?

Coding done in html, css and javascript.

Code Sample:

<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;
  }

If I click the radio buttons, either the div for myself or family or others, is displayed. Inside the div for family, I have another div, "details" which appears with 2 textboxes, if I click on the checkbox. So if I click the chkbox for all the 3 passenger divs, the passen开发者_JAVA百科ger3 div merges with the contact info div below it.

You need to modify the classes for the controls for which you want them to be displayed on top. Add z-index: 10; in the class, for the div you want to display (family1) later on, on the basis of selection of checkbox or radiobutton.

You might need to add z-index:1; on the class that was displaying the div initially. i.e., myself1