Question

我正在尝试使用从左侧浮动的菜单托盘制作固定位置菜单栏。一切正常，但从左侧z位置浮动的托盘位于主菜单上方。

结果，我看不到我在顶部菜单栏上应用的底部阴影。

＆＃13;

body {
  background: red;
}

.main-menu {
  position: fixed;
  background: #ffffff;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40px;
  box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}

.left-menu {
  background: #ffffff;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  height: 500px;
  box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6)
}

＆＃13;

<html>

<body>
  <div class="main-menu">
    <div class="left-menu"></div>
  </div>
</body>

</html>

＆＃13;

Answer 1

我需要让两个菜单的兄弟姐妹应用z-index。我还为视觉效果添加了一些颜色。由于这两个菜单现在是兄弟姐妹，我需要调整top的{{1}}，类似于left-menu的高度

＆＃13;

main-menu

＆＃13;

body {
  background: red;
}

.main-menu {
  position: fixed;
  background: #ffffff;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40px;
  box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
  z-index: 999;
  background-color: green;
}

.left-menu {
  background: #ffffff;
  position: absolute;
  top: 40px;
  left: 0;
  width: 200px;
  height: 500px;
  box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6);
  background-color: blue;
}

＆＃13;

Answer 2

一种解决方案是使用插入框阴影在左侧菜单中重复菜单栏的阴影。

＆＃13;

"web-animations-js": "^2.3.1",
"classlist.js": "^1.1.20150312"

＆＃13;

body {
  background: red;
}

.main-menu {
  position: fixed;
  background: #ffffff;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40px;
  box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}

.left-menu {
  background: #ffffff;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  height: 500px;
  box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6),
              inset 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}

＆＃13;

但我意识到这有点像kludge，我希望有更好的答案！

绝对定位的父级div出现在父级

2 个答案: