绝对定位的自定义下拉框引发滚动问题，如何解决？

要让下拉框覆盖父级main-div且不触发多余滚动条，不用改动main-div的原有设置，只需调整下拉相关元素的定位属性就行：

关键调整 #

• 把.dropdown的定位改成position: absolute，让它脱离父级的文档流，不再占用main-div的内部高度，这样父级就不会因为内容超高出滚动条。
• 给.dropdown设置bottom和left值，把它固定在main-div的底部位置（数值可以按需调整）。
• 保留.dropdown-content的position: absolute，同时调高它的z-index，确保下拉框能盖在其他元素上面。

修改后的完整代码 #

CSS #

.main-div{
  height: 300px;
  width: 600px;
  overflow-y: scroll;
  border: 2px solid #404040;
  /* 加这行让dropdown能以main-div为定位参考，不改动原有核心属性 */
  position: relative;
}
.dropdown {
  position: absolute; /* 改为absolute脱离文档流 */
  display: inline-block;
  bottom: 10px; /* 固定在main-div底部 */
  left: 10px; /* 水平位置按需调整 */
  margin: 0; /* 去掉原有margin避免位置偏移 */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #109fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 999; /* 提高层级确保覆盖 */
  bottom: 100%; /* 让下拉框向上展开，避免被页面底部挡住（可选） */
}

.dropdown:hover .dropdown-content {
  display: block;
}
.other-content{
  height: 280px;
  background-color: rgb(80, 210, 166);
}
.button-1{
  background-color: #180f37;
  padding: 10px;
  border: #0f1c40;
  color: #fff;
  cursor: pointer; /* 加个鼠标指针样式，交互更直观 */
}

HTML #

<div class="main-div">
    <div class="other-content">
        <h4>Scroll down to see the button</h4>
    </div>
    <div class="dropdown">
        <span class="button-1">Mouse over me</span>
        <div class="dropdown-content">
            <p>Hello World!</p>
        </div>
    </div>
</div>

原理说明 #

1. 脱离文档流：position: absolute让.dropdown不再算进main-div的内部高度里，从根源上解决父级因内容超高出滚动条的问题。
2. 定位参考：给main-div加position: relative只是为了让.dropdown能以它为基准定位，完全没改动它的高度和滚动属性，符合你不能修改父级的要求。
3. 下拉框不被裁剪：.dropdown-content是相对于脱离文档流的.dropdown定位的，不会被main-div的overflow-y: scroll裁剪，而且更高的z-index能保证它盖在其他元素上方。

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