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

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选择器）：

descending

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

更新-在使用绝对定位时也要下推内容：

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

在样式表中添加如下选择器规则：

// given jobOffersByMonth looks something like:
// Map {
//      "{MONTH_NAME}" => int
// }
// we must first convert it into an Array to sort it 
// using Array.from(jobOffersByMonth) or [...jobOffersByMonth]

[...jobOffersByMonth].sort(function(x, y){
   return d3.ascending(x[1], y[1]); // could alternatively be descending
});

这是要执行的操作，当 menu-open 类在文档中时，具有页面ID 的同级部分将被下推355px。

>

如果您希望在下推内容时获得更流畅的效果，还可以添加某种动画，例如：

   ref.where('idFrom', isEqualTo: id)
      .where('isSeen', isEqualTo: 0)
      .getDocuments()
      .then((result) {
    unReadCount = result.documents.length;
  });

我刚刚添加了转换，其中 .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;
  }
}

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