如何制作由蒙版叠加而不与蒙版内容叠加的菜单

时间：2019-07-17 12:02:12

标签： html css

嗯，这实际上是一个复杂的问题，标题的默认行为很简单，它位于所有内容的前面，但是我想放置一个将其覆盖的div，使页面模糊，我的目标是标题位于此div后面。

.body{
min-height: 2000px;
}

.overlay{
    background-color: rgba(126, 246, 53, 0.50);
    z-index: 1050;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
}

.overlayDiv{
    background: white;
    z-index: 1051;
    margin-top: 100px;
    position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
  
<div class="body">

<div class="overlayDiv">
  <h1>That's divs on top of the page</h1>
</div>

<div class="overlay"></div>
  </div>

在示例中可以看到，overlayDiv在overlay上方，这是我想要的，但是它遍历菜单，我想要的是菜单甚至位于菜单上方不透明，有可能吗？

5 个答案:

答案 0 :(得分：4)

如果我对您的理解正确，那么您想要导航栏在overlayDiv和overlay之间吗？您可以通过调整z-index es来实现。 navbar的默认z-index为1030，因此请将overlayDiv的{​​{1}}设置为较高，将z-index的设置为较低： 

overlay
.body{
  min-height: 2000px;
  z-index: 99;
}

.overlay{
  background-color: rgba(126, 246, 53, 0.50);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 97;
}

.overlayDiv{
  background: white;
  z-index: 5000;
  margin-top: 100px;
  position: relative;
  z-index: 98;
}

编辑：在这种情况下，z-index是正确的用法。

答案 1 :(得分：2)

请检查是否是您想要的东西。

.body{
min-height: 2000px;
}
nav.fixed-top{
z-index: 1050;
background: #fff;
box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.overlay{
    background-color: rgba(126, 246, 53, 0.50);
    z-index: 1060;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
}

.overlayDiv{
    background: white;
    z-index:1040;
    margin-top: 100px;
    position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar fixed-top navbar-light">
  <a class="navbar-brand" href="#">Header</a>
</nav>
  
<div class="body">

<div class="overlayDiv col-8 offset-2">
  <h1>That's divs on top of the page</h1>
</div>

<div class="overlay"></div>
  </div>

答案 2 :(得分：1)

只需添加<div class="BlurDiv"> </div>

将div放在整个html上，因此无论您的顶部容器div是<div class="main-container"></div>

使它像这样：

<div class="BlurDiv">
  <div class="main-container">
  </div>
</div>

然后创建您的模糊CSS并将其分配给div id BlurDiv。

答案 3 :(得分：0)

还有另一种解决方案，我觉得有些棘手，但满足要求，我在background上向nav添加了相同的overlay。现在，它将在文本上显示白色背景以及进入“导航”状态。这也将允许您单击nav元素。

.body {
  min-height: 2000px;
}

nav.fixed-top {
  z-index: 1080;
  background: #befa99;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.overlay {
  background-color: rgba(126, 246, 53, 0.50);
  z-index: 1030;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

.overlayDiv {
  background: white;
  z-index: 1040;
  margin-top: 100px;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar fixed-top navbar-light">
  <a class="navbar-brand" href="#">Header</a>
</nav>

<div class="body">
  <div class="overlayDiv col-8 offset-2">
    <h1>That's divs on top of the page</h1>
  </div>

  <div class="overlay"></div>
</div>

答案 4 :(得分：-4)

根据您的回答，我能够想到一种可行的解决方案，感谢您的承诺，我需要的是下面的

.body{
min-height: 2000px;
}

.overlay{
    background-color: rgba(126, 246, 53, 0.50);
    z-index: 1028;
    position: absolute;
    height: 2000px;
    width: 100%;
    top: 0;
}

.overlayDiv{
    background: white;
    z-index: 1029;
    margin-top: 100px;
    position: relative;
}

.navOverlayDiv{
    background-color: rgba(126, 246, 53, 0.50);
    z-index: 1053;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Header</a>
<div class="navOverlayDiv">
</div>
</nav>
  
<div class="body">

<div class="overlayDiv col-8 offset-2">
  <h1>That's divs on top of the page</h1>
</div>

<div class="overlay"></div>
  </div>

相关问题
最新问题