如何让自定义下拉弹窗既在自身按钮后又不被其他下拉遮挡

我正在开发一个自定义下拉组件（后续会补充完整ARIA属性），基础版本代码如下：

JavaScript 代码 #

[...document.querySelectorAll('.select')].forEach(select => {
  select.addEventListener('click', function() {
    select.nextElementSibling.classList.toggle('visible');
  });
});

CSS 代码 #

.dropdown {
  position: relative;
  width: 16rem;
  margin-bottom: 2rem;
}

.select {
  display: flex;
  align-items: center;
  height: 2rem;
  background-color: #ccc;
}

.popup {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  height: 10rem;
  background-color: #eee;
  box-shadow: 0 0 0.5rem red;
}

.popup.visible {
  display: block;
}

HTML 代码 #

<!doctype html>
<html>
<body>
  <div class="dropdown">
    <div class="select">Button 1 ▼</div>
    <div class="popup">Popup 1</div>
  </div>

  <div class="dropdown">
    <div class="select">Button 2 ▼</div>
    <div class="popup">Popup 2</div>
  </div>
</body>
</html>

当前问题 #

打开第一个下拉时，Popup 1会被Button 2遮挡。需要同时满足两个需求：

• 弹窗要在页面其他元素上方，不被其他下拉按钮遮挡；
• 弹窗要位于对应按钮的后方，隐藏弹窗顶部的box-shadow。

常规方案的问题：给.popup设高z-index（比如999）能解决遮挡，但弹窗会盖过自己的按钮；给按钮设更高z-index，弹窗又会被其他下拉按钮挡住；给.dropdown加z-index创建堆叠上下文也无法解决矛盾。

解决方案 #

利用堆叠上下文嵌套+动态提升父容器层级的方式，同时满足两个需求：

修改后的 JavaScript 代码

[...document.querySelectorAll('.select')].forEach(select => {
  select.addEventListener('click', function() {
    const dropdown = this.parentElement;
    const popup = this.nextElementSibling;
    popup.classList.toggle('visible');
    dropdown.classList.toggle('active'); // 点击时给父容器加/移除active类
  });
});

修改后的 CSS 代码

.dropdown {
  position: relative;
  width: 16rem;
  margin-bottom: 2rem;
  z-index: 1; /* 默认所有下拉堆叠上下文层级一致 */
}

.dropdown.active {
  z-index: 10; /* 打开下拉时，提升整个父容器的堆叠层级 */
}

.select {
  display: flex;
  align-items: center;
  height: 2rem;
  background-color: #ccc;
  position: relative; /* 开启独立堆叠上下文 */
  z-index: 2; /* 比弹窗层级高，挡住弹窗顶部阴影 */
}

.popup {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  height: 10rem;
  background-color: #eee;
  box-shadow: 0 0 0.5rem red;
  z-index: -1; /* 在自己的按钮下方 */
}

.popup.visible {
  display: block;
}

原理说明 #

1. 每个.dropdown默认z-index:1，确保它们的堆叠上下文是平级的，互不干扰；
2. 当某个下拉被激活（添加active类），z-index:10会让它的整个堆叠上下文（包括内部的按钮和弹窗）覆盖其他未激活的下拉；
3. 在单个下拉内部，.select的z-index:2高于.popup的-1，所以弹窗会被自己的按钮挡住顶部阴影，同时因为整个父容器层级提升，弹窗不会被其他下拉的按钮遮挡。

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