Why does Bootstrap .ratio cause img to appear over offcanvas menu?

Question

How can I stop a ratioed image from appearing above the offcanvas menu?

Using Bootstrap 5, forcing the image to be 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>

... causes the image to appear over my offcanvas menu...

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

It wasn't happening before I applied the ratios and, when I remove them, the ordering is fine.

.offcanvas-md comes with z-index: var(--bs-offcanvas-zindex); Varying this to any number (eg. 1050) and applying a low number (eg. z-index: 4) to .ratio does not result in the correct ordering.

Altering the position value of the image also does not seem to work.

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

Can you please provide a proper [mre] of the issue? – CBroe May 16 '23 at 08:53 — CBroe, May 16 '23 at 08:53
@CBroe https://jsfiddle.net/therobertandrews/npg925cf/2/ – Robert Andrews May 16 '23 at 15:55 — Robert Andrews, May 16 '23 at 15:55

score 0 · Answer 1 · answered May 16 '23 at 18:34

Solution:

.position-sticky on the div which wraps the offcanvas-md was tripping this up.

I still want the navbar to be .position-sticky at md and up, so converting this to .position-md-sticky seems to give me the best of both worlds - 1) continues to support normal-width sticky sidebar and 2) fixes the offcanvas nav.

Used in this solution: https://stackoverflow.com/a/41989982/1375163 Answerer said:

"Conclusion: if you need use z-index on bootstrap you will need define relative wrapper with absolute elements."

Why does Bootstrap .ratio cause img to appear over offcanvas menu?

1 Answers1