如何使用Tailwind CSS实现模态框右侧固定侧边栏？

要实现模态框内侧边栏固定在右侧、仅主内容滚动的效果，核心是用绝对定位替代固定定位，并调整容器的滚动属性，具体修改如下：

修改后的代码 #

<div className='text-black w-full h-[300px] overflow-hidden relative'>
  {/* 主内容区域：自身滚动，占满侧边栏外的空间 */}
  <div className='bg-black mr-[300px] h-full overflow-y-scroll'>
    {/* 这里放足够多的测试内容，比如重复文本 */}
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
    main content<br/>
  </div>
  {/* 侧边栏：相对于模态框容器绝对定位 */}
  <div className='absolute right-0 top-0 h-full w-[300px] border'>
    side content
  </div>
</div>

关键调整说明 #

• 父容器设置relative：让侧边栏的绝对定位以模态框容器为基准，而非浏览器视口
• 移除父容器的overflow-y-scroll：将滚动属性转移到主内容div上，确保只有主内容区域滚动
• 侧边栏用absolute替代fixed：fixed是相对于整个浏览器窗口定位，而absolute在relative父容器下会相对于父元素定位，完美贴合模态框右侧
• 主内容添加mr-[300px]：预留出侧边栏的宽度，避免内容被侧边栏覆盖
• 侧边栏设置h-full：让侧边栏高度和模态框容器一致，保持视觉统一

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