如何让最后打开的Offcanvas显示在最上层？

问题原因 #

Bootstrap 5的Offcanvas组件层级（z-index）由DOM渲染顺序决定：后出现在HTML结构里的Offcanvas，默认拥有更高的层级。你的案例中offcanvas3的DOM位置在offcanvas2之前，所以打开offcanvas3时会被offcanvas2挡住。

彻底解决方案 #

推荐使用动态调整DOM顺序的方法，适配任意数量的Offcanvas，无需手动维护层级：

1. 给所有Offcanvas添加统一类（比如custom-offcanvas），方便批量监听事件：

   <div class="offcanvas offcanvas-start custom-offcanvas" data-bs-scroll="true" tabindex="-1" id="offcanvas1">...</div>
   <div class="offcanvas offcanvas-start custom-offcanvas" data-bs-scroll="true" tabindex="-1" id="offcanvas3">...</div>
   <div class="offcanvas offcanvas-start custom-offcanvas" data-bs-scroll="true" tabindex="-1" id="offcanvas2">...</div>
   

2. 监听Offcanvas的show.bs.offcanvas事件，在弹窗显示前将其移到DOM末尾（比如body最后），确保它的层级最高：

   $('.custom-offcanvas').on('show.bs.offcanvas', function() {
     // 将当前要显示的Offcanvas移到body最后，自动获得最高层级
     $(this).appendTo('body');
   });
   

这个方法的优势：

• 不管有多少个Offcanvas，也不管从哪个弹窗里打开新弹窗，都能保证新弹窗显示在最上层
• 无需手动设置z-index，避免层级冲突
• 适配动态生成的Offcanvas

备选方案（固定数量场景） #

如果你的Offcanvas数量固定且不会动态添加，可以手动设置z-index覆盖默认值（Bootstrap默认Offcanvas的z-index是1045）：

#offcanvas1 { z-index: 1045; }
#offcanvas2 { z-index: 1050; }
#offcanvas3 { z-index: 1055; }

但这种方法需要逐个维护层级，扩展性差，不推荐用于多弹窗场景。

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