Question

我有一个手风琴菜单，可以向下滑过另一个有背景图像的容器。打开菜单后，它会将背景图像向下推到页面上。我尝试过使用z-index并将容器背景网址更改为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代码中添加select s.name from userdetails s unnest s.friends as f unnest s.bestfriends as bf where f="a" or bf="a"，z-index需要位置

Answer 2

为了让您将菜单放在/* date time picker */ $('.datetimepicker').each(function(){ jQuery(this).datetimepicker({ minDate :today }); })之上，您必须为<div class="background_container"></div>提供<div ng-hide="burgerChangeToX" class="nav_dropdown_mobile"></div>的位置属性。另外，给背景容器div一个相对位置，以便它可以相对于其他元素的定位相对定位。

当您将元素设置为绝对定位时，它将从文档流中移除，将其置于其他所有内容之上。因此它将位于background-image容器div的顶部。

这样你的z-index应该可以正常工作。你可能不得不做一些边缘/填充技巧，以使你的布局保持不变。

您可以在 Mozilla Developer Network (MDN)
找到更全面的说明

Answer 3

如果我理解你想要的是菜单经过图片，你必须给出绝对位置.nav_dropdown_mobile

Answer 4

将.nav_dropdown_mobile position absolute给予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; }。

以下是代码：

app.directive('onChangeName', ['pubsubService', function(pubsubService) {
  return {
    restrict: 'EA',
    scope: {
      onNameChangeCallback: '&'
    },
    link: function(scope, element) {
      pubsubService.Subscribe("changeNameEvent", scope, function(message) {
        scope.onNameChangeCallback({
          message: message.filterTeam
        });
      });
    }
  };
}]);

app.controller('controllerB', function($scope){
  $scope.callbackNameChanged = function(message) {
    $scope.team = message
  };
});

app.controller('controllerC', function($scope){
  $scope.callbackNameChanged = function(message) {
     $scope.team = message
  };
});

DEMO

Answer 5

添加一个位置：对于下拉容器是绝对的。感谢所有的回复。

背景图片Z-index

5 个答案: