I'm working with a div element called 'alert' that functions similarly to the javascript alert() method. However, I've noticed that it only covers the visible viewport of the page and not the entire content, which becomes uncovered as you scroll down. Is there a way to make the 'alert' div cover the whole page without using position:fixed? You can see a demo of the issue here. Thank you.
#alert{
position:absolute;
top:0%;
bottom:0%;
left:0%;
right:0%;
background-color:rgba(187,201,247,0.5);
z-index:3;
text-align:center;
font-size:20px;
}