css点击穿透

/* 解决点击穿透问题的示例代码 */

/* 1. 使用 pointer-events */
.pointer-events-none {
    pointer-events: none;
}

/* 2. 使用 z-index 和 position */
.container {
    position: relative;
    z-index: 1;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* 3. 使用 JavaScript 阻止事件传播 */
<script>
document.querySelector('.overlay').addEventListener('click', function(event) {
    event.stopPropagation();
});
</script>

解释说明：

1. pointer-events: 设置为 none 可以使元素不响应任何鼠标事件，从而避免点击穿透。适用于不需要与用户交互的元素。
2. z-index 和 position: 通过调整元素的层级关系，确保覆盖层在其他元素之上，防止点击事件传递到下方元素。
3. JavaScript 阻止事件传播: 使用 event.stopPropagation() 可以阻止点击事件冒泡到父级元素，从而避免点击穿透。