Full screen Not Clickable overlapping layer / overlay - CSS

I need to use CSS fullscreen not-clickable overlapping layer, that should be lightly transparent. How can I create a simple CSS overlay with transparency ?

Hi,

To create a full screen not-clickable overlapping layer with transparency, you can use this CSS code:

position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.3);
z-index: -1;

You can also use this solution:

position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: -1;

If needed, you can modify the position of overlay by z-index value.