无法点击背景组件，因为 z-index div 上边距水平展开

Question

我有 3d canvas z-index : -1 我想在 z-index: 0 上显示组件，并且能够毫无问题地单击 3d canvas。不幸的是，当我将组件 A 添加到 z-index 时：该组件的 0 边距水平展开，我无法单击组件 A 左侧和右侧的 3d canvas。

.background-3d-canvas {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: silver;
}
    
.front-component {
    background-color: blue;border-radius: 10px;
    padding: 20px;
    margin: auto;
    width: 300px;
    background-color: blue;
}

<div class="background-3d-canvas">
    <a href="#">Test</a><br/>
    <a href="#">Test2</a><br/>
    <a href="#">Test3</a><br/>
    <a href="#">Test4</a><br/>
    <a href="#">Test5</a><br/>
    <a href="#">Test6</a><br/>
</div>
    
<div class="front-component">
   Editor
</div>

我创建了 jsfiddle 来演示这个问题。并非所有链接都可以点击。

https://jsfiddle.net/ec5uuthy/

Answer 1

您可以将这些属性添加到 .front-component:

  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;

https://jsfiddle.net/76bpqge1/

无法点击背景组件，因为 z-index div 上边距水平展开

Unable to click background components because upper z-index div margin is spread horizontally

html

css

z-index