I have two div's A and B.
The B div is with:
position: absolute;
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.4);
With a botão in div A with display:block for Div B
A Div B overlaps with Div A . However, I can click on an object of div A whereas Div B is over!
How to block this access? This is: to click on something in the div A , you need to close the Div B !
You should add the left and top properties when using position: absolute so that the element knows where to position relative to the parent element.
In your case, add in the class of your% w the following:
position: absolute;
left: 0;
top: 0;
So it will cover the entire screen by getting over the other elements (see example working here ).
OBS : For the element to override the others, the div property must be used in conjunction with z-index .