Html 复选框单击它下面的项目

我正在为搜索表单中的两个下拉菜单编程。然而，我有一个在打开时覆盖另一个。这不是问题，除非我单击与另一个下拉列表重叠的复选框，然后它单击复选框下方的菜单按钮，而不是复选框本身

<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将要操作的控件的位置设置为相对的

，并将它的
z-index
更改为一个较大的数字，以确保它位于另一个控件之上

更多关于

z索引属性指定元素及其子体的z顺序。当元素重叠时，z顺序决定哪一个覆盖另一个。具有较大z指数的元素通常覆盖具有较低z指数的元素

对于定位的框，z索引属性指定：


当前堆叠上下文中长方体的堆叠级别
框是否建立本地堆叠上下文

注意：如果这不能解决您的问题，请提供一个示例代码。
您可以添加一个示例或您已经尝试过的内容吗？为什么不添加详细信息而不是建议添加？我理解z-index函数，但它仍然不起作用，所以这是我做错的其他事情。我现在已经发布了代码。
#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;
}