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

Question

我正在努力制作一个带有自定义 CSS 的 Squarespace 页面以实现移动响应。在移动屏幕中，我的页面有一个下拉菜单，其中包含页面的不同 link。我的问题是，在某些页面（例如音乐或手表）中，当您单击菜单按钮时，下拉菜单隐藏在页面内容后面。我知道这与使用 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 查看页面。有没有另一种方法可以放置菜单按钮和下拉列表，并使列表 "push" 页面内容向下，以便 link 列表可见？

Answer 1

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

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

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

  z-index: 1;
}

我现在可以在所有页面中看到菜单链接。您可以阅读有关 z-index 规范的更多信息 here.

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

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

将如下选择器规则添加到您的样式表：

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

这将做的是，当 menu-open class 在文档中时，具有 id 的同级部分 ,会被下推355px.

如果你想要更平滑的内容下推效果，你也可以添加某种动画，如下所示：

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

  transition: transform .3s linear;
}

我刚刚添加了 transition，其中 .3s 是转换所需的时间。

Answer 2

使用绝对定位的一个问题是，即使您使用转换来补偿它，在某些设备和浏览器宽度上，徽标会与导航重叠。观察当前解决方案呈现的内容：

另一个问题是导航折叠和文本不再可见之间的延迟：

因为这是 Squarespace，您无权编辑底层 DOM，我会使用 flexbox 来解决这个问题。为此，首先 摆脱这个:

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

并添加：

@media only screen and (max-width: 640px) {
  #canvas {
    display: flex;
    flex-direction: column;
  }
  #mobileMenuLink {
    order: 1;
  }
  #mobileNav {
    order: 2;
  }
  #header {
    order: 3;
  }
  #header ~ * {
    order: 4;
  }
}

请注意，以上内容没有供应商前缀，因此如果您想支持旧版浏览器，则相应地需要添加供应商前缀。

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

Drop down menu hides behind content of page

html

css

mobile

squarespace