position: fixed;为啥会点击穿透

position: fixed;会导致点击穿透的原因是因为fixed定位的元素脱离了文档流，并且覆盖在其他元素之上，所以点击事件会直接穿透到fixed元素下面的元素上。当fixed元素没有填充内容时，点击事件会直接穿透到fixed元素下面的元素上，而不会触发fixed元素上的点击事件。这是因为fixed元素没有实际的内容，所以点击事件会透过fixed元素传递到下面的元素上。\[2\]

为了解决这个问题，可以采用给fixed定位元素添加一个absolute定位的子元素，并给子元素添加一些内容，然后设置子元素的颜色为透明，最后为了不影响页面交互，给子元素添加pointer-events: none;的样式。这样做的目的是让fixed元素有实际的内容，从而阻止点击事件穿透到下面的元素上。\[3\]另外，还可以使用绝对定位的方式来解决点击穿透问题，将整个页面进行绝对定位，并设置overflow: hidden;来禁止页面滚动，这样也可以避免点击事件穿透到下面的元素上。\[1\]
#### 引用[.reference_title]
- *1* [小程序中fixed定位弹框页面穿透问题](https://blog.csdn.net/zd1007129657/article/details/118905935)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [css 固定定位position:fixed 拦截了点击事件，导致后面组件无法使用@click的解决办法](https://blog.csdn.net/ScottePerk/article/details/130063952)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [通过“css点击穿透“优化[移动端fixed导致的问题]](https://blog.csdn.net/qq_35306736/article/details/108139416)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]