如何在设置overflow-y:scroll的navbar内正常显示溢出的模态框

下面是几种不需要将模态框移出navbar的可行方案：

方案1：给模态框设置fixed定位 #

只要navbar及更高层级父元素没有设置transform、perspective、filter这类会变更fixed定位上下文的属性，fixed定位的元素会直接相对于浏览器视口定位，完全不受父元素overflow属性限制，不会被裁剪。
示例CSS：

.modal-main {
  position: fixed;
  /* 保留原有模态框的尺寸、定位逻辑 */
  width: 400px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999; /* 保证模态框在最上层显示 */
}

方案2：拆分navbar的滚动容器 #

如果不能用fixed定位，可以调整DOM结构拆分滚动区域，既保留navbar纵向滚动能力，又不会裁剪模态框：

1. 在navbar内部新增一个独立的滚动容器，把navbar里除模态框之外的所有内容移入该容器
2. 把原本设置在navbar上的overflow-y: scroll挪到新的滚动容器上，同时将navbar本身的overflow设为visible
   调整后DOM结构：

<div class="background">
     <nav class="navbar">
         <!-- 新增滚动容器 -->
         <div class="navbar-scroll-content">
             <!-- 原navbar除模态框外的所有内容放在此处 -->
         </div>
         <div class="modal-wrapper">
             <div class="modal-main">
             </div>
         </div>
     </nav>
</div>

对应CSS：

.navbar {
  overflow: visible;
  /* 保留原有宽高、定位等属性 */
}
.navbar-scroll-content {
  overflow-y: scroll;
  height: 100%;
  width: 100%;
}

方案3：使用overflow-clip-margin调整裁剪范围 #

如果无法修改DOM结构，可以用overflow-clip-margin属性扩展父元素的溢出裁剪范围，让水平溢出的模态框内容正常显示（注意该属性仅兼容现代主流浏览器）。
示例CSS：

.navbar {
  /* 数值根据模态框水平溢出的最大宽度调整 */
  overflow-clip-margin: 200px;
}

内容的提问来源于stack exchange，提问作者Ricardo Rodríguez Sepúlveda