display:flex和position:fixed
时间: 2023-08-20 17:13:19 浏览: 151
回答: 当使用display:flex和position:fixed一起使用时,会出现问题。\[1\]在这种情况下,设置了position:fixed后,display:flex的布局效果会失效。\[2\]这是因为position:fixed会使元素脱离文档流,不再参与flex布局。\[3\]解决这个问题的方法是给使用display:flex的盒子外面嵌套一个盒子,并给外层盒子添加position:absolute/fixed,并设置width:100%。这样可以保持flex布局的效果,并实现固定定位。
#### 引用[.reference_title]
- *1* *2* [解决【display:flex布局】遇上 【position: absolute / fixed 】的失效问题](https://blog.csdn.net/Miss_liangrm/article/details/99184017)[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^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [当position: fixed; 遇到 display: flex;](https://blog.csdn.net/brokenmile/article/details/113445229)[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^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文