Question

当点击登录或注册链接时，我尝试应用叠加层来创建类似于https://fancy.com的效果，即背景应该变暗。

问题是我的导航栏和内容框由于某些原因不会受到叠加但不确定原因？

我创造了一个小提琴来解释：https://jsfiddle.net/p861yfLp/1/

我的代码：

<body>
  <div class="overlay">
    <nav>
      Menu
    </nav>
    <div id="content">
      <div class="box">
        Box
      </div>
    </div>
  </div>
</body>

Answer 1

更改这些文件

CSS - 将位置设置为绝对

attributes

编辑：在@DaniP回答之后，如果您想要覆盖的“模态”感觉，则不需要对css进行更改。如果你想覆盖我建议使用绝对位置的所有东西。

HTML - 无需使您的叠加层包含所有其他HTML

.overlay {
      position: absolute;
}

现在，您的叠加层将“覆盖”。

Answer 2

实际应用了半黑色背景色，但nav（作为子元素）定义了自己的背景色（#FFF）。如果你删除它的背景颜色，它可以工作：

.nav {
  background-color: transparent;
}

https://jsfiddle.net/rw60gzbz/

覆盖不会影响页面的所有区域

2 个答案: