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;
}

这样可以防止点击事件定位到叠加层.