與具有較低z-index的元素進行交互

Question

我的側邊欄有問題。

 html, body { height: 100%; margin: 0; } .sidebar{ display: inline-block; height: 100%; width: 100px; box-shadow: 3px 0px 100px 0px rgba(0, 0, 0, 0.16); background-color: #fff; } .content { position: absolute; top: 0; padding-left: 100px; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #EEF2F8; z-index: -1 } .section { display: block; height: 100px; background-color: #fff; } 

 <div class="sidebar"> </div> <div class="content"> <div class="section"> <a href="#">You can't interact with me :(</a> </div> </div> 

我需要與內容進行交互，但是當我在.content上放置更高的z-index時，陰影將不再顯示。 因此，我可以將背景與.content分開，但是我想添加具有不同背景的部分，並且這些部分也不會帶有陰影。

我還確保邊欄不能覆蓋整個屏幕，但是您仍然無法與右側互動。

Answer 1

問題是將內容的z-index設置為-1。 與其在背景元素上設置負值，不如在背景元素上設置更高的值。 如果將位置設置為相對，則可以將z-index值添加到側邊欄，並獲得所需的行為。

 html, body { height: 100%; margin: 0; } .sidebar{ position: relative; z-index: 1; display: inline-block; height: 100%; width: 100px; box-shadow: 3px 0px 100px 0px rgba(0, 0, 0, 0.16); background-color: #fff; } .content { position: absolute; top: 0; padding-left: 100px; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #EEF2F8; } .section { display: block; height: 100px; background-color: #fff; } 

 <div class="sidebar"> </div> <div class="content"> <div class="section"> <a href="#">You can interact with me :)</a> </div> </div>