Is there a way to prevent a ratioed image from appearing above the offcanvas menu?
When using Bootstrap 5 and specifying a 16x9 ratio for the image...
<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>
... the image ends up displaying on top of 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>
<!-- Additional menu content here -->
</nav>
</div>
</div>
https://i.sstatic.net/o8aFO.png
This issue did not occur before setting the ratios, and removing them fixes the layout.
.offcanvas-md has a
z-index: var(--bs-offcanvas-zindex);z-index: 4) to .ratio, the display order remains incorrect.
Changing the position property of the image does not resolve the problem.