复选框单击下面的项目

Question

我正在编写搜索表单中的两个下拉菜单。 但是，当打开时，我的一个可以覆盖另一个。 没问题，直到我单击与其他下拉菜单重叠的复选框，然后单击复选框下方的菜单按钮，而不单击复选框本身。

<ul>
  <div id="drops"><li><a href="#" onclick="toggle('drop-wrapper');">Categories</a></div> 
    <div id="drop-wrapper">
    <input type="checkbox" name="select-all-cat" id="select-all-cat" /><label for="cities-label" class="categories-label">Select all</label><br>
    <input type="checkbox" name="products" value="products"><label class="categories-label">Products</label><br>
    <input type="checkbox" name="services" value="services"><label class="categories-label">Services</label><br>
    <input type="checkbox" name="real_estate" value="real_estate"><label class="categories-label">Real estate</label><br>
    </div>
  </li>
</ul>
</div>

CSS：

#drop-wrapper {
margin-top: 10px;
background-color: #000;
left: -30%;
text-align: left;
position: relative;
z-index: 10000;
width: 180px;
text-decoration: none;
border-radius: 10px;
}

当我单击“产品”复选框时，会出现问题，它单击了其后面的菜单按钮。

Answer 1

使用CSS将要操作的控件的位置设置为relative ，并将其z-index更改为较大的数字，以确保其位于另一个控件的上方。

有关z-index的更多信息。

z-index属性指定元素及其后代的z顺序。 当元素重叠时，z顺序确定哪个覆盖另一个。 具有较大z索引的元素通常会覆盖具有较低z索引的元素。

对于定位框，z-index属性指定：

• 当前堆栈上下文中框的堆栈级别。
• 该框是否建立本地堆栈上下文。

附注：如果这不能解决您的问题，请提供示例代码。