Ever Thems Ever Thems - 2 months ago 9
HTML Question

div under div not clickable

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

This wrap always online on the all pages, but - if notification closed, the block active - and inpossible on the site clicking anything.

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


I could not find a better solution for the wrap full width and responsive all PC(s), only for width and height set 100%.

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

But if .notice-wrap is not full width and height, the bg color not full width.
How possible solve the under of div clicking the anything?

I try inline-block for display .notice-wrap, but dont working.

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%;
}