I try to create a transparent layer to hide the content of my whole page behind it. It works without the Bootstrap columns. But it doesn't work as soon as I add the columns for responsive design (or I don't understand how to put the layer on my page).
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
<div >
<div >
<div >
<div ></div>
<div >
header
</div>
<div ></div>
</div>
</div>
</div>
<div >
<div >left</div>
<div >
<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 >right</div>
</div>
</div>
</body>
</html>
On jsbin.com
Who has an idea how to bring the whole content behind the layer?
CodePudding user response：
Add position: relative for body, and replace height: 100vh on your layer element with bottom: 0.
The reference point for absolute positioning, is the nearest positioned ancestor - and if that does not exist, the viewport. By adding position: relative to body, body becomes the reference point.
And instead of specifying width or height for an absolute positioned element, you can also specify the two opposite "coordinates" - then the width/height will be determined by that.
CodePudding user response：
Maybe you can try z-index: 999? Have you tried it?