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

问题描述：

我尝试应用覆盖层来创建类似于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>

所有的内容是覆盖内.. https://jsfiddle.net/p861yfLp/2/ – DaniP

答

更改这些文件

CSS - 设置的位置，以绝对

.overlay { 
     position: absolute; 
}

编辑：继@丹如果您希望覆盖层具有“模态”感觉，则iP回答对CSS的更改不是必需的。如果你想覆盖所有我会建议使用绝对位置。

HTML - 没有必要让你覆盖包含所有其他HTML

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

现在您的覆盖将 '覆盖'。

这是更好地使用固定的“ modal“的用途... – DaniP

我实际上打算使用模式 – tommyd456

DaniP是对的，@ tommyd456简单地不包裹带有内容的'overlay'，正如我在我的答案中所述;） – dippas

答

实际上应用了半黑色背景色，但nav（作为子元素）具有自己的背景色（#FFF）。如果你删除它的背景色，它的工作原理：

.nav { 
    background-color: transparent; 
}

https://jsfiddle.net/rw60gzbz/

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

相关推荐