Ever Thems Ever Thems - 4 months ago 19
CSS Question

div nested in div not clickable

I have one notification css. Unfortunately, have for one wrap body of the notification.

This wrap always shows on all pages, but if the notification is closed, the block is active and it gets impossible to click anything on the site.

.notice-wrap {
display: block;
position: fixed;
top: 0px;
z-index: 9999;
width: 100%;
height: 100%;
}


I could not find a better solution for wrapping the div with full width and responsive, only for width and height set 100%.

I need full width and height, because in the
.notice-wrap
I have one div for
.notice-item-wrapper
which has
background-color: rgba(0, 0, 0, 0.50);
.

But if
.notice-wrap
is not full width and height, the bg color is not full width either.

How can I click a div underneath another div?

I tried
display:inline-block
for
.notice-wrap
, but it doesn't work.

Answer Source

I think overlapping every page with a full-page div is not a good idea, but adding pointer-events: none to its style will make the elements beneath it clickable.

This WILL NOT work on IE<11

.notice-wrap {
   pointer-events: none;
   display: block;
   position: fixed;
   top: 0px;
   z-index: 9999;
   width: 100%;
   height: 100%;
}