我怎樣才能阻止一個比例圖像出現在畫布外菜單的上方？

使用Bootstrap 5，強制圖像為16x9...

<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>

...使圖像出現在我的畫布外菜單上...

<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>
                        <!-- And more menu content -->
            </nav>
        </div>
    </div>

在我應用這些比率之前，這是不會發生的，當我移除它們時，排序是好的。

。offcanvas-md自帶z-index:var(-bs-off canvas-zindex)；將此值改為任何數字(例如1050)并將一個較小的數字(例如z-index: 4)應用于。比率不會導致正確的排序。

改變圖像的位置值似乎也不起作用。

https://jsfiddle.net/therobertandrews/npg925cf/2/

解決方案:

。位置——粘在包裹畫布的div上——MD犯了這個錯誤。

我仍然希望導航條是。md及以上位置粘滯，因此將其轉換為。位置-md-sticky似乎給了我兩個世界最好的東西- 1)繼續支持正常寬度的粘性側邊欄，2)修復了offcanvas導航。

在這個方案中；https://stackoverflow.com/a/41989982/1375163回答說:

"結論:如果您需要在bootstrap上使用z索引，您將需要定義 具有絕對元素的相對包裝。"