I'm attempting to create a transparent layer to conceal the entire content of my page behind it. It works fine without the Bootstrap columns, but as soon as I add the columns for responsive design, it stops working (or maybe I'm just not understanding how to position the layer correctly).
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898edf6eaf6e8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
#layer{
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #ccc;
height: 100vh;
overflow: auto;
z-index: 1;
display: block;
}
</style>
</head>
<body>
<div id="layer"> </div>
<div class="container-fluid">
<div class="row">
<div class="fixed-top">
<div class="row">
<div class="col-3 d-none d-lg-block"></div>
<div class="col-6 flex-grow-1 d-flex justify-content-between">
header
</div>
<div class="col-3 d-none d-lg-block"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-3 d-none d-lg-block">left</div>
<div class="col-6 flex-grow-1 d-flex justify-content-between">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci eros, sollicitudin mattis dolor id, accumsan porttitor augue. Sed quam velit, ultrices a elit condimentum, porttitor gravida magna. Fusce a leo massa. In vestibulum rutrum urna vel luctus. Praesent ornare mi elit, a mollis purus vestibulum eu. Vivamus suscipit justo consequat tortor luctus imperdiet. Sed tempus, lacus at rutrum ultrices, turpis dui laoreet velit, at sagittis purus turpis sed ligula. In semper consequat lectus vel sodales. Pellentesque viverra sapien nec dui fermentum sodales. Donec quis turpis varius, porta enim nec, rutrum lacus.
Nulla dui felis, efficitur a elit ut, scelerisque interdum sem. Mauris eros ligula, imperdiet in nisl porttitor, mattis suscipit nulla. Nullam posuere, risus eu semper pretium, justo felis mollis felis, ut pulvinar odio mi ac magna. Etiam et mauris elit. Duis pharetra ultricies felis eget pretium. Aenean cursus in elit nec congue. Nunc imperdiet magna non lorem malesuada, id condimentum dui lobortis. Mauris volutpat diam nibh, vitae finibus justo suscipit et. Aliquam erat volutpat. Fusce sit amet imperdiet urna. Aenean eleifend semper augue, at ultricies metus tempor in.
Fusce ultrices vehicula nunc a imperdiet. Maecenas condimentum mauris commodo metus vehicula laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce pharetra posuere erat, eget consectetur enim dignissim id. Nam vitae risus libero. Sed venenatis mauris sit amet efficitur venenatis. In ut tellus volutpat, hendrerit ligula ut, semper lectus. Sed lacinia dictum nibh feugiat mollis. Nam ut neque libero. Morbi quis lorem convallis mi aliquam fringilla at vitae massa. Mauris convallis velit lacus, quis gravida purus pharetra sed. Vestibulum hendrerit, urna vitae mollis efficitur, mi nisi pellentesque metus, sed suscipit ipsum ligula quis erat. Suspendisse lobortis nunc non dui feugiat vehicula. Quisque at mi vel enim ultricies rhoncus. Maecenas imperdiet quis sapien nec mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
</div>
<div class="col-3 d-none d-lg-block">right</div>
</div>
</div>
</body>
</html>
Available on jsbin.com
Can anyone share ideas on how to position the entire content behind the layer?