与具有较低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>