How to make overlay that covers certain part of the page?

I have a simple HTML and CSS overlay that triggers at certain actions. I would like to display the overlay on certain part of the page. I have side-bar menu on the left attached to it the main body. using position: fixed; is good to create an overlay that covers all the page but I want overlay to cover only the page in where its displayed beside that it has to set on top of the current content as if I am using position: fixed; How can I do this. HTML Code that is placed in the body content of the page:

.backdrop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: black;
    opacity: 0.3;
    background-size: 100% 100%;
}
.loadingSpan {
    display: inline-block;
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: red;
}
<div class="backdrop" id="LoadingContainer">
    <div class="loadingSpan">
        <h1 id="LoadingText">Loading</h1>
        <div class="spinner-grow" role="status">
            <span class="sr-only">Loading</span>
            <span class="sr-only"></span>
        </div>
        <div class="spinner-grow" role="status">
            <span class="sr-only">Loading</span>
        </div>
        <div class="spinner-grow" role="status">
            <span class="sr-only">Loading</span>
        </div>
    </div>
</div>

The overly works fine but it covers the whole page alongside with the side menu so I want to fix this just to cover the page that its current its code placed at. Side Menu:

<section class="sidebar">
        <ol class="quickinfo">
            <li class="quickinfo_item">
                <span class="quickinfo_text">Menu1</span>
                <span class="quickinfo_text">Menu2</span>
            </li>
     </ol>
    </section>

CSS:

.sidebar {
  background: #222d32;
  flex: 1;
  max-width: 15%;
  height: 100%;
  color: white; }
  .sidebar_item {
    display: flex; }

Layout:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <section class="container_body container-fluid">
            @{ Html.RenderAction("Sidebar", "Ui"); }
            <section class="content container-fluid">
                @RenderBody()
            </section>
        </section>
</body>
</html>

Answer

Use position: relative for the container and position: absolute for the overlay. Then put the overlay inside the container. Example:

body {
font-family: sans-serif;
margin: 0;
}
.container {
width: 300px;
height: 200px;
border: 1px solid black;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(0,0,0,0.5);
color: white;
}
<h1>Outside the Container</h1>
<div class="container">
Container Content
<div class="overlay">
Overlay Content
</div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *