css点击穿透

CSS点击穿透是指在HTML中，当一个元素使用了定位（position: absolute）或固定定位（position: fixed）时，它会覆盖在其他元素上方，从而阻止其他元素接收到点击事件。

在CSS中，点击穿透可以通过pointer-events属性来控制。pointer-events属性有以下几个取值： - auto（默认值）：元素可以接收鼠标事件。 - none：元素无法接收鼠标事件，事件将透过该元素传递到下面的元素。 - visiblePainted：元素无法接收鼠标事件，但可以接收绘画事件。 - visibleFill：元素无法接收鼠标事件，但可以接收绘画事件和填充元素的事件。 - visibleStroke：元素无法接收鼠标事件，但可以接收绘画事件和描边元素的事件。 - visible：元素无法接收鼠标事件，但可以接收绘画、填充和描边元素的事件。 - painted：元素无法接收鼠标事件，但可以接收绘画和填充元素的事件。 - fill：元素无法接收鼠标事件，但可以接收填充元素的事件。 - stroke：元素无法接收鼠标事件，但可以接收描边元素的事件。 - all：元素可以接收鼠标和绘画、填充、描边元素的事件。

当一个元素使用了position: absolute或position: fixed时，它会创建一个新的层级，称为堆叠上下文。堆叠上下文中的元素会覆盖在其他元素上方，从而影响点击事件的传递。

如果我们希望在堆叠上下文中的元素上方的元素也能接收到点击事件，可以将被覆盖的元素设置pointer-events: none。这样，被覆盖的元素就会将点击事件透过自己传递到下面的元素。

举个例子，我们在HTML中有一个父容器，并在父容器中放置一个定位的子元素和一个固定定位的子元素。此时，父容器中的子元素将会覆盖在父容器上方，从而阻止父容器接收点击事件。

```

```

在这个例子中，父容器的点击事件将被覆盖在上面的子元素遮挡，从而无法触发。如果需要解决这个问题，可以将父容器中的子元素设置pointer-events: none。

``` ```

通过设置pointer-events: none，被覆盖的子元素将会将点击事件透过自己传递到下面的元素，从而解决了点击穿透的问题。

总结： CSS点击穿透在使用定位或固定定位时会发生，通过设置元素的pointer-events属性可以控制点击事件的传递。通过设置pointer-events: none可以解决点击穿透问题，使被覆盖的元素将点击事件透过自己传递到下面的元素。