固定带搜索栏的多选下拉框顶部搜索栏及全选按钮的布局问题

我懂你遇到的麻烦了——把多选下拉框的搜索栏和全选按钮设为固定定位后，它们确实能一直停在顶部，但随之而来的就是会挡住下方滚动的列表项，这体验确实挺糟心的。

先直观看看你提到的状态：
初始的多选下拉结构：

设置固定定位后的问题效果：

下面给你几个实用的解决思路，你可以根据自己的场景选：

思路1：给列表容器加顶部内边距（最常用） #

当头部（搜索栏+全选按钮）设为position: fixed后，它会脱离正常文档流，下面的列表自然会往上顶。这时候只要给列表容器加上和头部高度一致的padding-top，就能把内容往下推，完美避开遮挡。

给你个CSS示例参考：

/* 固定头部样式 */
.multiselect-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff; /* 记得加背景色，避免滚动时透过头部看到后面的内容 */
  z-index: 10;
}

/* 给列表容器加内边距 */
.multiselect-list {
  padding-top: 60px; /* 这个值要和头部的实际高度匹配，自己调整下 */
  max-height: 300px; /* 保持列表的滚动区域 */
  overflow-y: auto;
}

思路2：用粘性定位（Sticky）替代固定定位 #

如果你的下拉框是在一个父容器里，用position: sticky可能更省心。它会在滚动到顶部时自动固定，而且不会脱离文档流，自然也就不会出现遮挡问题。不过要注意：父容器不能设置overflow: hidden这类属性，不然sticky会失效。

CSS示例：

.multiselect-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}

.multiselect-list {
  max-height: 300px;
  overflow-y: auto;
}

思路3：动态计算头部高度（适合响应式场景） #

如果头部高度是动态变化的（比如不同屏幕尺寸下高度不一样），可以用JS来实时计算头部高度，再给列表设置对应的内边距：

const header = document.querySelector('.multiselect-header');
const list = document.querySelector('.multiselect-list');

// 初始化时设置内边距
list.style.paddingTop = `${header.offsetHeight}px`;

// 窗口大小变化时重新计算
window.addEventListener('resize', () => {
  list.style.paddingTop = `${header.offsetHeight}px`;
});

一般思路1就足够解决大部分场景了，你可以先试试这个~

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