如何在另一個div前面放置一個div？

Question

我想阻止用戶單擊頁面上除按鈕頂部以外的任何位置。

 .topdiv { height: 90px; } .divBlocking { bottom: 0; left: 0; position: fixed; right: 0; top: 0; cursor: wait; } 

 <div class="topdiv" *ngIf="!blockContent"> <button>Cancel</button> </div> <div class="divBlocking" *ngIf="blockContent"></div> <div class="divApp"> //application content/form/inputs </div> 

因此，包括tobdiv在內的整個屏幕都無法點擊， tobdiv了我的意願。 更改divBlocking=>top: 90; 似乎不起作用

Answer 1

更新topdiv類的position: fixed; 和z-index: 999;

 .topdiv { height: 90px; position: fixed; z-index: 999; } .divBlocking { bottom: 0; left: 0; position: fixed; right: 0; top: 0; cursor: wait; } 

 <div class="topdiv" *ngIf="!blockContent"> <button>Cancel</button> </div> <div class="divBlocking" *ngIf="blockContent"></div> <div class="divApp"> //application content/form/inputs </div> 

Answer 2

您只需將z-index: -1添加到.divBlocking 。
這意味着將.divBlocking發送到后面。

為了說明不同之處，我添加了一些背景色。

您的原始代碼結果如下

在.divBlocking添加z-index: -1

編輯代碼

 .topdiv{ height:90px; background-color: red; } .divBlocking{ bottom: 0; left: 0; position: fixed; right: 0; top: 0; cursor: wait; background-color:rgba(201, 76, 76, 0.3); z-index: -1; } 

 <div class="topdiv" *ngIf="!blockContent"> <button>Cancel</button> </div> <div class="divBlocking" *ngIf="blockContent"></div> <div class="divApp"> //application content/form/inputs </div> 

Answer 3

我對CSS的理解是，您可以使用z-index確定元素的堆棧順序

在最基本的情況下，HTML頁面可以視為二維頁面，因為文本，圖像和其他元素在頁面上排列而沒有重疊。 在這種情況下，只有一個渲染流程，並且所有元素都知道其他元素占用的空間。 使用z-index屬性可以在呈現內容時調整對象分層的順序。

了解z索引