滚动区域内绝对定位按钮列表被遮挡截断问题求助

问题原因 #

你的下拉列表被遮挡的核心原因是：.prioridades（绝对定位的下拉列表）嵌套在设置了overflow-y: scroll/auto的.swim-lane容器内。CSS中，绝对定位元素的显示范围会被最近的、设置了非visible值overflow的祖先容器裁剪，这和z-index、isolation属性无关——这些属性只控制层叠顺序，无法突破overflow的裁剪限制。

解决方案 #

方案1：调整定位层级（推荐） #

将下拉列表的定位父级从.swim-lane内的元素，改为不设置overflow的上层容器（比如.lanes），这样下拉列表就不会被滚动容器裁剪。

修改步骤：

1. 给上层的.lanes添加position: relative，作为下拉列表的定位参考：

.lanes {
  display: flex;
  align-items: flex-start;
  justify-content: start;
  gap: 16px;
  padding: 24px 32px;
  overflow: scroll;
  height: 100%;
  position: relative; /* 新增 */
}

2. 移除.container-prioridades的position: relative，并调整.prioridades的样式：

.container-prioridades {
  /* position: relative; 移除 */
}

.prioridades {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 100; /* 确保在最上层 */
  background: white; /* 添加背景避免与下层内容重叠 */
  border: 1px solid #ddd;
}

3. 更新JS中的位置计算，让下拉列表基于按钮的位置定位：

arrayPriorities.forEach(function(element) {
  element.addEventListener('click', function(event) {
    const nextElement = element.nextElementSibling;
    nextElement.classList.toggle('hidden'); // 简化显示/隐藏逻辑

    if (!nextElement.classList.contains('hidden')) {
      const btnRect = element.getBoundingClientRect();
      const lanesRect = document.querySelector('.lanes').getBoundingClientRect();
      // 计算相对于.lanes的位置
      nextElement.style.top = `${btnRect.top - lanesRect.top + btnRect.offsetHeight}px`;
      nextElement.style.left = `${btnRect.left - lanesRect.left}px`;
    }
  });
});

方案2：使用overflow-clip-margin（快速兼容） #

如果不想调整定位层级，可以给.swim-lane添加overflow-clip-margin属性，允许内容在容器外显示指定范围：

.swim-lane {
  max-height: 200px;
  overflow-y: auto;
  overflow-clip-margin: 100px; /* 允许内容在容器外显示100px范围 */
}

注意：如果下拉列表高度超过设置的overflow-clip-margin值，仍然会被裁剪。

修改后完整代码示例 #

CSS #

.lanes {
  display: flex;
  align-items: flex-start;
  justify-content: start;
  gap: 16px;
  padding: 24px 32px;
  overflow: scroll;
  height: 100%;
  position: relative;
}

.container-prioridades {
  /* 移除relative定位 */
}

.prioridades {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 100;
  background: white;
  border: 1px solid #ddd;
}

.hidden {
  display: none;
}

JS #

const priorities = document.getElementsByClassName('priority-button');
const arrayPriorities = Array.from(priorities);

arrayPriorities.forEach(function(element) {
  element.addEventListener('click', function(event) {
    const nextElement = element.nextElementSibling;
    nextElement.classList.toggle('hidden');

    if (!nextElement.classList.contains('hidden')) {
      const btnRect = element.getBoundingClientRect();
      const lanesRect = document.querySelector('.lanes').getBoundingClientRect();
      nextElement.style.top = `${btnRect.top - lanesRect.top + btnRect.offsetHeight}px`;
      nextElement.style.left = `${btnRect.left - lanesRect.left}px`;
    }
  });
});

HTML #

<div class="lanes">
  <div class="" id="">
    <div style="width: 100%; display: flex; justify-content: space-between;">
      <h3 class="heading">TODO</h3>
    </div>
    <div class="swim-lane" id="todo-lane" style="max-height: 200px; overflow-y: auto;">
      <div class="task" draggable="true">
        Get groceries
        <div class="container-prioridades">
          <button class="priority-button">prioridades</button>
          <div class="prioridades hidden">
            <button>1</button>
            <button>2</button>
            <button>3</button>
          </div>
        </div>
      </div>
      <div class="task" draggable="true">
        Feed the dogs
        <div class="container-prioridades">
          <button class="priority-button">priorities</button>
          <div class="prioridades hidden">
            <button>1</button>
            <button>2</button>
            <button>3</button>
          </div>
        </div>
      </div>
      <div class="task" draggable="true">
        Mow the lawn
        <div style="display: flex;align-items: center;">
          <div class="container-prioridades">
            <button class="priority-button">prioridades</button>
            <div class="prioridades hidden">
              <button>1</button>
              <button>2</button>
              <button>3</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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