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;
}

当我点击＆＃34;产品＆＃34;复选框，单击它后面的菜单按钮。

Answer 1

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

有关z-index的更多信息。

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

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


当前堆叠上下文中框的堆栈级别。

框是否建立了本地堆叠上下文。

P.S。如果这不能解决您的问题，请提供示例代码。

复选框单击其下的项目

1 个答案: