Dropdown菜单选项无法点击求助：疑似被下方输入框遮挡

问题描述 #

点击表单中的下拉菜单后能展开看到选项，但无法选择，疑似被菜单下方的文本输入框遮挡。

相关HTML代码 #

<form>
    <div class="input-field m-b-30">
        <input type="text" id="firstName" placeholder="First Name" name="name" required="">
        <label for="fullName">Required</label>
    </div>
    <div class="input-field m-b-30">
        <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
        <label for="phoneNumber">Required</label>
    </div>
    <div class="input-field m-b-30">
        <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
        <label for="phoneNumber">Business Name</label>
    </div>
    <div class="input-field m-b-30">
        <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
        <label for="phoneNumber">Phone Number</label>
    </div>
    <div class="input-field m-b-30">
        <input type="email" id="emailAddress" placeholder="Email Address" name="email" required="">
        <label for="emailAddress">Email</label>
    </div>
    <div class="input-field m-b-30">
        <input type="text" id="subject" placeholder="I Would Like To Discuses " name="subject" required="">
        <label for="subject">Subject</label>
    </div>
    <div class="input-field m-b-30">
        <label for="cars">Choose a car:</label>

        <select name="cars" id="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
    </div>
    <div class="input-field textarea-field m-b-30">
        <textarea id="message" placeholder="Message" name="message"></textarea>
    </div>

    </div>
    <div class="input-field">
        <button type="submit" class="template-btn">Send Message <i class="fas fa-arrow-right"></i></button>
    </div>
</form>

解决建议 #

• 提升下拉菜单的层级：给下拉菜单所在的容器或<select>元素设置更高的z-index，确保它的层级高于下方输入框。示例CSS：

  #cars {
      position: relative;
      z-index: 10;
  }
  

  或者针对其容器：

  .input-field:nth-child(7) {
      position: relative;
      z-index: 10;
  }
  

• 修复HTML结构错误：代码中存在多余的</div>标签（在textarea容器之后），这会导致页面布局异常，先删除该多余标签，再检查下拉菜单是否恢复正常。
• 检查下方元素的定位属性：查看下拉菜单下方的文本输入框或其容器是否设置了position: absolute、overflow: hidden等属性，这些可能导致元素覆盖下拉选项，如有则调整对应CSS。
• 排查父容器层级：确认表单或其他父容器的z-index设置，避免下拉菜单的展开区域被其他元素压制。

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