怎么解决position：fixed导致的脱离文档流

当一个元素设置了 `position:fixed` 属性，它会脱离文档流并相对于浏览器窗口进行定位。如果此时它的父元素没有设置 `position:relative` 或其他定位属性，那么它的位置将会相对于文档根元素进行定位，而不是它的父元素。这可能导致在某些情况下出现布局问题。

解决这个问题的方法通常是在父元素上设置 `position:relative` 或其他定位属性，这样子元素就可以相对于父元素进行定位。如果父元素不适合设置定位属性，可以尝试添加一个包裹元素，并在该元素上设置定位属性，使得子元素相对于该包裹元素进行定位。另外，如果元素只需要相对于其父元素进行定位，可以使用 `position:absolute` 而非 `position:fixed` 属性。

相关问题

position: fixed; 缝隙

当使用 `position: fixed` 属性时，元素会相对于视口固定位置，不随页面滚动而移动。但是，如果该元素被放置在另一个元素内部，且该元素有固定的边界框大小，那么可能会出现缝隙问题。

这是因为固定定位的元素从文档流中脱离，其它元素会认为它并不存在，因此会继续填充该元素原来的空间。这可能会导致在该元素周围出现一些不必要的缝隙。

要解决这个问题，你可以在父元素上设置 `position: relative`，并在固定定位的元素上设置 `top`、`left`、`right` 或 `bottom` 属性来调整其位置。这样，元素就不会超出父元素的边界，也不会造成缝隙问题。

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 ]