html - 扩展 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 个 passenger div 的复选框，passenger3 div 将与其下方的联系信息 div 合并。

Answer 1

您需要修改希望它们显示在顶部的控件的类。添加z-index: 10;在类中，对于稍后要显示的 div ( family1 )，在选择 checkbox 的基础上或 radiobutton .

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