html - 背景图片 Z-index

Question

我有一个 Accordion 菜单，它向下滑动到另一个具有背景图像的容器上。当菜单打开时，它会将背景图像推到页面下方。我试过使用 z-index 并将容器背景 url 更改为 html 文件上的 img 标签，但仍然没有成功。有什么建议吗？

<!--Dropdown menu on mobile-->
<div ng-hide="burgerChangeToX" class="nav_dropdown_mobile">
  <a ui-sref-active="selected" ui-sref="home">Home</a>
  <a ui-sref-active="selected" ui-sref="about">About</a>
  <a ui-sref-active="selected" ui-sref="skills">Skills</a>
  <a  ui-sref-active="selected"ui-sref="work">Work</a>
  <a ui-sref-active="selected" ui-sref="fun">Fun</a>
</div>

<!-- background image -->
<div class="background_container">
  <div class="background_mobile"></div>
</div>

/*Mobile navbar dropdown*/
.nav_dropdown_mobile {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    overflow: auto;
    font-size: 40px;
    margin-top: 0px;
    transition: margin-top .75s ease;
    font-family: Yantramanav;
    z-index: 5;
}

/* container with background image */
.background_mobile {
    background: url('../img/Wolf_blue.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 90%;
    height: 58vh;
    margin-top: 50px;
    z-index: 1;
}

Answer 1

为了让您将菜单放在 <div class="background_container"></div> 的顶部, 你必须给出 <div ng-hide="burgerChangeToX" class="nav_dropdown_mobile"></div> position: absolute; 的位置属性.另外，给背景容器 div 一个 relative 位置，这样它就可以相对于其他元素的定位来定位自己。

When you set an element to be positioned asbolutely, it is being removed from the flow of the document, placing itself above everything else. Therefore it will be on top of the background-image container div.

这样你的 z-index 应该可以正常工作。为了让布局保持不变，您可能需要做一些边距/填充技巧。

You can find more thorough explanation here at the Mozilla Developer Network (MDN)