Q:

Top-of-page element superimposed on HTML

How to add a div at the top of the overlay page?
I need to create a div that stays over all the elements of the page at the top when the internet connection is not active according to the image below, in what way using CSS I can create this div with * ngIf as an example below.
    <div *ngIf="connection_refused" class="connection-status-wrap">
<span class="connection-status-text">No connection to server</span>
</div>

I am verifying if there is internet connection, when not having internet connection should display the above div on all elements of the page at the top.
Image Example: Div on top page elements

A:

You can do something like this
window.setInterval(function(){
if (navigator.onLine) {
    //if its offline, show div.
} else {
    //else (when the connection return) hide div.
}}, 5000); // every 5 seconds, function check if has connection

And use Position: fixed, top: 0, and define width and height; 

