如何阻止比例图像出现在画布菜单上方?
使用 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>
...使图像出现over我的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>
<!-- And more menu content -->
</nav>
</div>
</div>
在我应用比率之前并没有发生,当我删除它们时,排序很好。
.offcanvas-md
带有 z-index: var(--bs-offcanvas-zindex);
将此更改为任何数字(例如 1050)并将较小的数字(例如 z-index: 4
)应用于 .ratio
不会导致正确的排序。
改变图像的
position
值似乎也不起作用。