css中position:fixed的一些影响问题

木木芳草

于 2022-06-10 15:56:52 发布

阅读量990

点赞数

分类专栏： css 文章标签： css 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44817180/article/details/125222959

版权

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了两种情况下的解决方案：1. 当页面底部的固定button设置有min-width，通过在button外包裹一个div并设置overflow-x:auto来避免横向滚动。2. 若使用了display:flex，可能导致button靠右，解决方法是移除display:fixed。这些技巧适用于移动端布局和响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.当页面底部有个固定button，且给其固定min-width，当屏幕宽度小于min-width时不会出现横向滚动
解决办法：就是给这个固定button外面加个div，其class为buttonBox,并且把原button的class（.fixedBtn）中的position：fixed删除。

.buttonBox{
position:fixed;
bottom:0;
width:100%;
overflow-x:auto;
}
.fixedBtn{
min-width:360px;
}
<div class="buttonBox">
<button class="fixedBtn">下一步</button>
</div>

2.当页面底部有个固定button，且给其固定min-width，当屏幕宽度小于min-width时不会出现横向滚动，这时如果在position：fixed层加display：flex;有可能会导致，固定的button会靠右。（解决办法就是删除display:fixed）