展开 div 内容时页面对齐方式发生变化

Question

在我的网页中，我隐藏了一些 div。它们的内容仅通过单击相应的复选框或单选按钮来显示。但在这种情况下，我的页面对齐方式会发生变化。表单字段与其下方的元素合并。我该如何避免这种情况？

编码以 html、css 和 javascript 完成。

代码示例：

<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 中，我有另一个 div，“详细信息”，如果我单击复选框，它会显示 2 个文本框。因此，如果我单击所有 3 个乘客 div 的 chkbox，乘客 3 div 将与其下方的联系信息 div 合并。

Answer 1

您需要修改控件的类，以便它们显示在顶部。在选择 checkboxfamily1) 添加 z-index: 10; 在类中代码> 或<代码>单选按钮。

您可能需要在最初显示 div 的类上添加 z-index:1;。即，myself1