背景图片 Z-index

Question

我有一个手风琴菜单，它向下滑动到另一个有背景图像的容器上。当菜单打开时，它会将背景图像推到页面下方。我试过使用 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

在你的CSS代码中添加position:relative，z-index需要位置

Answer 2

如果我理解并且你想要的是菜单通过图像，你必须给绝对位置 .nav_dropdown_mobile

Answer 3

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

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 应该可以正常工作。您可能需要做一些 margin/padding 技巧才能使您的布局保持不变。

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

Answer 4

给 .nav_dropdown_mobile absolute 的 position 所以它不占用 space 然后定位到 top:0px;.

代码如下：

.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;
    position:absolute;
    top:0px;
    z-index: 5;
}

DEMO

Answer 5

添加一个位置：绝对到下拉容器就成功了。感谢大家的回复。

背景图片 Z-index

Background image Z-index

html

css

z-index

angularjs