z-index下的div：-1不可點擊

Question

嗨我目前有一個頁面上有多個圖層我有這個內容容器，我已經設置在背面。 在我的styles.css這里是我的代碼

#content-container{
/**position**/
position: absolute;
top: 0px;
padding-top: 80px;
padding-left: 80px;
z-index: -1 !important;
/**size**/
width: 100%;
height: 100%;
}

這里也是account-container代碼

#account-container {
/**position**/
float:right;
margin-top:2px;
margin-right:-60px;

/**size**/
width: 350px;
height: 220px;
border-radius: 5px;

/**color**/
color:black;
background-color: white;

}

我設置這個因為我有這個accounts-container ，當點擊應該是abouve content-container截至目前這里是它看起來像

正如您在右上角看到的那樣是accounts-container但是發生了什么，div content-container不再可以點擊任何想法？

Answer 1

如果您的“accounts-container”上面有任何“層”（更高的z-index），則此容器（透明部分）必須將CSS屬性pointer-events設置為none：

.whatever {
  pointer-events: none;
}

這樣可以防止點擊事件定位到疊加層。