叠加在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

为了将元素保持在页面顶部，固定位置应该可以正常工作

position:fixed;
top:0%;

但是，如果存在稳定的连接并且您希望隐藏查看器中的元素，则可以在css中设置元素的visibility

visibility: hidden;

希望这有帮助！

Answer 2

你可以做这样的事情

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，并定义宽度和高度;