如何制作像youtube一样的叠加层

Question

我有一个带navigation栏的简单网页.当切换我的导航栏时,我希望页面中的其余区域覆盖实时Youtube(下面附有一个示例图像).但是在尝试100次后,结果附在下面(下面附有一个样本图像).问题是它不是overlaying已定义color属性的元素.

我的css代码实现叠加:

.overlay{
        width: 100%;
        position: fixed !fixed;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5) !important;
        z-index:0;
        cursor: pointer;
   }

Answer 1

您需要添加更高z-index和灰色的背景叠加层.

$(".btn").click(function () {
    $(".overlay").show();
});

    .overlay {
     background-color: rgba(128, 128, 128, 0.40);
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 99999;
      display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

<div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit.</div>
    <input type="text">
    <button class="btn btn-success">Submit</button>
</div>