下拉菜单隐藏在页面内容的后面

Question

我正在使用自定义CSS制作Squarespace页面以响应移动设备。在移动屏幕上，我的页面具有一个下拉菜单，其中包含该页面的不同链接。我的问题是，在某些页面（例如“音乐”或“观看”）上，单击菜单按钮时，下拉菜单隐藏在页面内容的后面。我知道这与使用position: absolute有关，但是我还没有找到使用position: relative来放置菜单按钮和下拉列表的方法。这是菜单的CSS：

#mobileNav {
  background: none;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}

#mobileNav .wrapper {
  border-bottom-style: none;
  border-bottom-color: none;
}

您可以使用密码Help123在richiequake.com上查看页面。还有另一种方法可以让我放置菜单按钮和下拉列表，并让列表将页面内容“下推”，从而使链接列表可见吗？

Answer 1

基本上，您是否缺少z-index属性。这会将容器#mobileNav放在更高的层中。

通过进行此更改（将z-index属性添加到CSS选择器）：

#mobileNav {
   background: none;
   position: absolute;
   top: 20%;
   left: 0;
   right: 0;

  z-index: 1;
}

现在，我可以在所有页面中看到菜单链接。您可以阅读有关Z索引规范here的更多信息。

UPDATE-在使用绝对定位时也将内容下推：

由于您已经在使用自定义类来切换菜单链接，因此您可以使用它来切换内容部分。

向样式表中添加以下选择器规则：

.menu-open~section#page {
     transform: translateY(355px);
}

这将是当menu-open类在文档中时，带有page id]的同级部分将被下推355px。

如果您希望在下推内容时获得更平滑的效果，也可以添加某种动画，如下所示：

#page {
  margin-top: 100px;
  margin-bottom: 100px;
  opacity: 1;
  position: relative;

  transition: transform .3s linear;
}
我刚刚添加了transition

，其中。3s是过渡所需的时间。