HTML元素重叠求助：输入框与下拉框被遮挡无法交互

问题描述 #

HTML元素出现重叠故障：

• class为tripOrigin的出发地输入框被tripStartDate开始日期元素遮挡，光标无法正常显示
• class为adultSelect的成人选择下拉框被舱位选择元素遮挡，无法选择成人数量

CSS & HTML #

原有CSS代码 #

.flightPill {
  width: 100px;
  height: 40px;
  background-color: goldenrod;
  position: relative;
  float: left;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.hotelPill {
  width: 100px;
  height: 40px;
  background-color: goldenrod;
  position: relative;
  float: left;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.carPill {
  width: 100px;
  height: 40px;
  background-color: goldenrod;
  position: relative;
  float: left;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.travelSearchBar {
  width: 1000px;
  height: 400px;
  background-color: black;
  opacity: 0.9;
}

.tripOrigin {
  color: white;
  position: relative;
  right: 300px;
}

.tripDestination {
  color: white;
  position: relative;
  right: 300px;
}

.tripStartDate {
  position: relative;
  bottom: 150px;
}

.tripEndDate {
  position: relative;
  bottom: 150px;
}

.adultSelect {
  position: relative;
  left: 200px;
  bottom: 250px;
}

.childSelect {
  position: relative;
  left: 200px;
  bottom: 250px;
}

.classSelect {
  position: relative;
  left: 300px;
  bottom: 330px;
}

.innerbackgroundSearchbar {
  width: 80%;
  height: 200px;
  background-color: gray;
  position: relative;
  top: 25%;
}

原有HTML代码 #

<div>
  <center>
    <br>
    <br>
    <br>
    <div class="travelSearchBar">
      <div class="moveTravelPills">

        <div class="flightPill">
          <p><b>Flights</b></p>
        </div>

        <!-- <div class="hotelPill">
                    <p><b>Hotels</b></p>
                </div>
                <div class="carPill">
                    <p><b>Cars</b></p>
                </div> -->
      </div>
      <div class="innerbackgroundSearchbar">

        <div class="tripOrigin">
          <br>
          <label><b>Origin:</b></label>
          <br>
          <br>
          <input id="origin" />
        </div>
        <br>
        <div class="tripDestination">
          <label><b>Destination:</b></label>
          <br>
          <br>
          <input/>
        </div>

        <div class="tripStartDate">
          <br>
          <label><b>Start Date:</b></label>
          <br>
          <br>
          <input/>
        </div>
        <br>
        <div class="tripEndDate">
          <label><b>End Date:</b></label>
          <br>
          <br>
          <input/>
        </div>
        <div class="adultSelect">
          <label><b>Adult:</b></label>
          <br>
          <select id="adult">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
          </select>
        </div>
        <br>

        <div class="childSelect">
          <label><b>Child:</b></label>
          <br>
          <select id="child">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
          </select>
        </div>
        <div class="classSelect">
          <label><b>Class:</b></label>
          <br>
          <select id="class">
            <option>Economy</option>
            <option>Premium</option>
            <option>Business</option>
          </select>
        </div>

        <br>
        <button>Search</button>
      </div>
    </div>
  </center>
</div>

问题原因 #

1. 手动偏移滥用：所有表单元素都用position: relative配合left/right/bottom手动挪位置，这种方式不会改变元素在文档流中的占位，后续元素会和前面的元素叠在一起。
2. 无规范布局体系：完全靠手动计算偏移量，没有用Flex/Grid这类现代布局工具，很容易算错导致重叠。
3. 浮动未清除：flightPill用了float: left，父容器moveTravelPills没有清除浮动，导致高度塌陷，间接干扰内部布局。

修复方案 #

1. 用Flex重构布局 #

给innerbackgroundSearchbar设置Flex布局，自动排布元素，替代手动偏移：

.innerbackgroundSearchbar {
  width: 80%;
  height: 200px;
  background-color: gray;
  position: relative;
  top: 25%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

2. 移除所有手动偏移样式 #

删掉所有元素的position: relative和left/right/bottom属性，让元素回到正常文档流：

.tripOrigin {
  color: white;
  /* 移除position: relative和right: 300px */
}
.tripDestination {
  color: white;
  /* 移除position: relative和right: 300px */
}
.tripStartDate {
  /* 移除position: relative和bottom: 150px */
}
.tripEndDate {
  /* 移除position: relative和bottom: 150px */
}
.adultSelect {
  /* 移除position: relative、left: 200px和bottom: 250px */
}
.childSelect {
  /* 移除position: relative、left: 200px和bottom: 250px */
}
.classSelect {
  /* 移除position: relative、left: 300px和bottom: 330px */
}

3. 清除浮动修复父容器 #

给moveTravelPills添加清除浮动的样式，解决高度塌陷问题：

.moveTravelPills {
  overflow: hidden;
  padding: 10px;
}

4. 优化元素对齐（可选） #

给每个表单分组设置固定宽度，让布局更规整：

.tripOrigin, .tripDestination, .tripStartDate, .tripEndDate, .adultSelect, .childSelect, .classSelect {
  flex: 0 0 calc(25% - 15px);
  min-width: 180px;
}

内容的提问来源于stack exchange，提问作者Jaskaran