html - 叠加在 HTML 上的页面顶部元素

Question

如何在叠加页面顶部添加一个div？

我需要创建一个 div，根据下图，当互联网连接不活动时，它会停留在页面顶部的所有元素上，以什么方式使用 CSS 我可以使用 * ngIf 创建这个 div 作为示例下面。

    <div *ngIf="connection_refused" class="connection-status-wrap">
<span class="connection-status-text">No connection to server</span>
</div>

我正在验证是否有互联网连接，当没有互联网连接时，应该在页面顶部的所有元素上显示上述 div。

Image Example: Div on top page elements

Answer 1

你可以这样做

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

并使用Position: fixed, top: 0，并定义宽高；