Ways to conceal Bootstrap-designed elements behind a fullscreen overlay

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">&nbsp;</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?

Answer №1

To make sure your layer element is positioned correctly, make sure to add position: relative to the body element. Additionally, replace height: 100vh with bottom: 0 for your layer element.

When using absolute positioning, the reference point is the nearest positioned ancestor or the viewport if no ancestor is positioned. By adding position: relative to the body, it becomes the reference point for absolute positioning.

Instead of specifying width or height for an absolutely positioned element, you can specify the two opposite "coordinates", and the width/height will be determined by that.

Answer №2

Why not give z-index: 999 a shot? Have you tested it out yet?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on making a fresh form appear during the registration process

After clicking on a submit button labeled as "continue" within a form, a new form will appear for you to complete in order to continue the registration process. ...

Ways to extract innerHTML content from a loaded element generated by using the .load() method

Check out the code snippet below: template.html : <div id="nav"> Welcome to Space </div> layout.html : <div id="content"> </div> $('#content').load("template.html #nav"); ale ...

Error: The NgTable in AngularJS is not defined when reloading the page

I have successfully implemented Angularjs NgTable with pagination inside a tab provided by Angularjs Material in various parts of my project. However, I am facing an issue where I am unable to reload the tables in this particular case. I am unsure of what ...

Update CSS using onChange event with an array of values

I'm currently working on an app that allows users to select a color scheme from a dropdown form. The hexidecimal values associated with the selected color scheme successfully populate specific text fields as intended. However, I am facing difficulty i ...

Is the onmouseover / onmouseout transition failing to function properly?

Is there a way to make the ease-in-out effect work without modifying the HTML code? http://jsfiddle.net/68ojLg6p/ <img class="transition-img" onmouseover="this.src='http://1.bp.blogspot.com/-ISjKMLTnaTQ/Ty-USX-J1uI/AAAAAAAAC_0/YB6MUMflRmg/s400/fe ...

Establishing a class for wp_nav_menu

Is there a way to transform the following code: <ul class="ulStyle"> <li class="liStyle"> <div class="first"> <div class="second"> menu1 </div> </div> </li> </ul> into wp_nav_menu? I'm struggling with ...

Ways to append each list item from one unordered list to the end of another based on their unique styles

I am in the process of making a website responsive and I am faced with the task of combining two different menus. In order to achieve this, I need to transfer all list items (li) from one unordered list (ul) to another. Provided below is a simplified vers ...

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...

Utilizing v-for and CSS Grid to showcase data effectively

I'm having trouble organizing my Vuex data with CSS GRID. It's turning out messy. My setup includes two columns: the first one for labels and the second for values. {{$store.state.stepOne.textfield[idx].label}} The code above is used to displa ...

How come my div can alter its own attributes on hover, but its sibling cannot?

As I delve into the realm of web development, my initial project involves creating a portfolio site. However, I am facing difficulties with the dropdown section in one of the menus. I incorporated a :hover pseudo-class to the dropdownhover div to signal ...

Opacity is a key feature of Bootstrap 5 background colors

I am currently facing a challenge with creating an OR divider using Bootstrap 5, as it seems to not display correctly when compared to Bootstrap 4. The text's background color also appears to have some transparency in my project. Here is the code I a ...

Personalized VueJS Counter

Just started learning VueJS and I've encountered a challenge while attempting to build a custom counter. Here is the code snippet: <template v-for="(ben, i) in plan.beneficios"> <div class="w-80 w-90-480 m-auto pa-hor-5-480" :class= ...

Angular: facing difficulty displaying static html pages on server, although they render correctly when run locally

Within my Angular project, I have stored a few static html files (specifically sampleText.html) in the src/assets/html folder. In one of my components, I am attempting to fetch and display this file. The following code is being used for this purpose. Every ...

Exploring the world of JQuery Ajax selectors

I am attempting to create a comment system similar to the one found at . I have the AJAX code below, but I am having trouble uniquely selecting text areas for each post. The issue is that the number of posts can vary, so it's important that each post ...

Style binding for background image can utilize computed properties or data for dynamic rendering

In my code, I am trying to pass an object that contains a string path for its background image. I have experimented with using data and computed properties, but so far I haven't had any luck getting them to work within the :style binding. However, if ...

"Need help on Tumblr: how can I make a div container wrap around a photo

Check out this website. Is there a way to make the div snugly wrap around the image? Currently, it seems to be sticking 4px below the image (as indicated by the red line I added in the background of the div). I'm puzzled as to where those additional ...

Submitting both $_POST[] data and $_FILES[] in a single AJAX request

Struggling with uploading images along with dates on my website. I am passing the date using $_POST and the image files in $_FILES. Here is the Javascript code snippet: (function post_image_content() { var input = document.getElementById("images"), ...

The main menu items in jQuery do not display the child sub menu upon clicking

I'm currently in the process of creating a unique mobile menu for my Wordpress website, but I'm facing some challenges when it comes to displaying and hiding the sub-menu items. I've assigned the class name .menu-item-has-children as my sele ...

Can you explain the significance of the characters '& > * + *' in JSX (CSS)?

When using material UI, the progressbar demo includes lines of JSX code like this: '& > * + *': { marginTop: theme.spacing(2), }, Can you explain what the selector '& > * + *' represents in this context? ...

Creating an Active Link in Bootstrap 5.0 (Beta 3) Navbar Using JavaScript

I am currently working with Bootstrap 5 (Beta 3 - no JQuery) on a static website, and I am facing the challenge of making a navbar link appear active. I prefer to achieve this using JavaScript instead of creating a separate navbar for each page. For instan ...