Creating a mask overlay that covers the entire screen while excluding a specific sibling div

Question

Creating a mask overlay that covers the entire screen while excluding a specific sibling div

My goal is to create a div that acts as a mask covering the entire window. It should have an opacity of 0.5 and a background color of lightgray. However, there is one particular div on the screen that I do not want to be affected by the mask. I attempted to set its z-index higher than the mask's, but that approach did not work. The code snippet in question is shown below:

.parent {
  height: 300px;
  background-color: red;
}

.sub1 {
  height: 100px;
  background-color: yellow;
  z-index: 10;
  opacity: 1;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  background-color: lightgray;
  z-index: 1;
}

    <div class="parent">
      
      <div class="sub1">
        hello
      </div>
      
      <div class="mask">
      </div>
    </div>

Even though I aimed for the sub1 div to appear on top of the mask, it still displayed with an opacity of 0.5.

The complete code can be accessed and run from this link: https://codepen.io/zhaoyi0113/pen/vzERYY.

javascript html css

Answer 1

Answer №1

Make sure to include a position property in the styling of .sub1 to ensure that the z-index functions properly

The z-index CSS attribute determines the stacking order of a positioned element
_{z-index | MDN Docs}

I suggest using position: relative; to avoid affecting your document layout.

.sub1 {
  height: 100px;
  background-color: yellow;
  z-index: 10;
  opacity: 1;
  position: relative;
}

Answer 2

Make sure to include a position property in the styling of .sub1 to ensure that the z-index functions properly

The z-index CSS attribute determines the stacking order of a positioned element
_{z-index | MDN Docs}

I suggest using position: relative; to avoid affecting your document layout.

.sub1 {
  height: 100px;
  background-color: yellow;
  z-index: 10;
  opacity: 1;
  position: relative;
}

Answer 3

Answer №2

You have the option to utilize the calc() function and specify the height of the mask by subtracting the height of the sub, for example, 100px. Additionally, it is advisable to remove the position: fixed property from the CSS of the mask. The updated CSS code for the mask would look like this:

.mask {
  left: 0;
  top: 0;
  width: 100%;
  height: -webkit-calc(100% - 100px);
  height: -moz-calc(100% - 100px);
  height: calc(100% - 100px);
  opacity: 0.5;
  background-color: lightgray;
  z-index: 1;
}

Below you can find a functional demo:

.parent {
  height: 300px;
  background-color: red;
}

.sub1 {
  height: 100px;
  background-color: yellow;
  z-index: 10;
  opacity: 1;
}

.mask {
  left: 0;
  top: 0;
  width: 100%;
  height: -webkit-calc(100% - 100px);
  height: -moz-calc(100% - 100px);
  height: calc(100% - 100px);
  opacity: 0.5;
  background-color: lightgray;
  z-index: 1;
}

<div class="parent">
  
  <div class="sub1">
    hello
  </div>
  
  <div class="mask">
  </div>
</div>

Check out the working Codepen here.

Answer 4

You have the option to utilize the calc() function and specify the height of the mask by subtracting the height of the sub, for example, 100px. Additionally, it is advisable to remove the position: fixed property from the CSS of the mask. The updated CSS code for the mask would look like this:

.mask {
  left: 0;
  top: 0;
  width: 100%;
  height: -webkit-calc(100% - 100px);
  height: -moz-calc(100% - 100px);
  height: calc(100% - 100px);
  opacity: 0.5;
  background-color: lightgray;
  z-index: 1;
}

Below you can find a functional demo:

.parent {
  height: 300px;
  background-color: red;
}

.sub1 {
  height: 100px;
  background-color: yellow;
  z-index: 10;
  opacity: 1;
}

.mask {
  left: 0;
  top: 0;
  width: 100%;
  height: -webkit-calc(100% - 100px);
  height: -moz-calc(100% - 100px);
  height: calc(100% - 100px);
  opacity: 0.5;
  background-color: lightgray;
  z-index: 1;
}

<div class="parent">
  
  <div class="sub1">
    hello
  </div>
  
  <div class="mask">
  </div>
</div>

Check out the working Codepen here.

Creating a mask overlay that covers the entire screen while excluding a specific sibling div

Answer №1

Answer №2

Similar questions

Invoke a class method once the Promise has been successfully resolved

Common causes leading to my header component experiencing hydration errors in Next.js

Access the child component within an @ChildComponent directive in Angular

Align the image vertically within a column with a height of 100%

Using Javascript to Access ASMX Web Services

What exactly do discrete animations entail?

Difficulty recognizing sessions in production for a self-hosted Next.js application using Clerk Dev Auth

Image failed to load

I am looking to host several iterations of jQuery on a content delivery network within my Nuxt application

Getting just the outer edges of intricate BufferGeometry in Three.js

Using Python and Selenium, you can locate an element inside another element

Encountering an Unknown Error while Parsing JSON in Google Apps Script

Can a custom javascript object be exported in various formats similar to the Date object?

Determining the Ideal Size for Expandable Text Headers

What is causing the button within my ExtJS grid to display as "[object Object]"?

When using react-router-dom, a blank page may appear for routes that contain more than one path segment followed by a single forward slash "/"

delayedExecution function

What is preventing the buttons from filling the entire space of the parent element in this case?

Sending Node.js array from endpoint to Javascript function

Having issues with using jsonplaceholder.typicode.com as a data source in AngularJS