Bootstrap .ratio类为何导致图片覆盖Offcanvas菜单？如何解决？

问题说明 #

为图片外层容器添加.ratio ratio-16x9类强制16:9比例后，图片会显示在Offcanvas菜单上方，移除该类后层级显示恢复正常。尝试过调整Offcanvas的z-index（如设置为1050）、给.ratio容器设置低z-index（如4），以及修改图片的position属性，均无法解决问题。

相关代码 #

图片比例控制代码 #

<div class="ratio ratio-16x9 my-3">
     <img width="768" height="432" src="my-image.jpg" class="object-fit-cover img-fluid w-100 wp-post-image" alt="" decoding="async" itemprop="image" sizes="(max-width: 768px) 100vw, 768px">
</div>

Offcanvas菜单代码 #

<div class="offcanvas-md offcanvas-end sticky-md-top show" tabindex="-1" id="offcanvasResponsive"
    aria-labelledby="offcanvasResponsiveLabel" aria-modal="true" role="dialog">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title " id="offcanvasResponsiveLabel">
            <span id="site-title-offcanvas" itemprop="publisher" itemscope=""
                itemtype="https://schema.org/Organization">
                <a href="http://example.com/" title="My Site" rel="home" itemprop="url" class="navbar-brand"><span
                        itemprop="name">My Site</span></a> </span>
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive"
            aria-label="Close"></button>
    </div>
    <div class="offcanvas-body d-block vh-100 overflow-y-auto">
        <nav role="navigation" itemscope="" itemtype="https://schema.org/SiteNavigationElement">
            <ul class="list-unstyled m-3">
                <li class="mb-2">
                    <a itemprop="url" data-bs-toggle="collapse" data-bs-target="#category-collapse" href="#"
                        class="nav-link sidebar-parent d-flex collapsed" aria-expanded="true">
                        <div class="flex-fill">
                            <i class="menu-icon fa-fw fa-solid fa-desktop"></i>
                            <span class="text" itemprop="name">Categories</span>
                        </div>
                    </a>
                    <!-- 更多菜单内容 -->
            </nav>
        </div>
    </div>

问题根源 #

Bootstrap的.ratio类默认设置了position: relative，而Offcanvas的z-index生效依赖自身或父级为非static定位。如果.ratio容器的父级存在position: relative且z-index层级干扰，会导致Offcanvas的层级优先级失效，出现图片覆盖菜单的情况。

解决方法 #

方法一：提升Offcanvas的定位优先级 #

给Offcanvas容器添加position: fixed并设置更高的z-index，覆盖原有sticky-md-top可能带来的定位冲突：

#offcanvasResponsive {
    position: fixed !important;
    z-index: 1060 !important; /* 高于Bootstrap默认的--bs-offcanvas-zindex（1050） */
}

方法二：取消.ratio容器的相对定位 #

给.ratio容器设置position: static，移除其相对定位对层级的影响，且不会破坏比例控制功能（.ratio的比例由伪元素实现，static定位不影响其工作）：

.ratio.ratio-16x9 {
    position: static;
}

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