详解flex布局与position:absolute/fixed的冲突问题使用Flex布局实现头部固定内容区域滚动的方法详解flex布局下图片变形的解决方法Flex布局实现div内部子元素垂直居中的示例Flex布局让子项保持自身高度的实现让CSS flex布局最后一行列表左对齐的N种方法(小结)css3 flex布局实现平均分配元素的示例代码flex布局实现上下固定中间滑动的布局方式flex是什么及flex布局语法教程详解

之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下：

项目实战：

我们现在想做一个头部的导航栏，又想用fixed把它固定在上方，又想用弹性盒布局去设置它内部的样式，可是发现其中的弹性盒布局已经失效了。

HTML代码如下：

协会简介
协会章程
协会架构
资料下载

CSS代码如下：

 ul { position: fixed; display: flex; justify-content: space-between; margin: 0 15px; background: pink; } li { flex: 1; list-style: none; height: 100px; line-height: 100px; text-align: center; font-size: 30px; border: 1px solid #fff; }

效果如下：

我们可以发现弹性盒布局已经失效了，那么我们如何解决这个问题呢？
其实很简单，只需要在ul的外面再套一个盒子就可以了。然后外层盒子使用定位，内层盒子正常使用弹性盒布局。

HTML改变后的代码为：

协会简介
协会章程
协会架构
资料下载

CSS改变后的代码为：

 .nav-box { width: 100%; position: fixed; } ul { display: flex; justify-content: space-between; margin: 0 15px; background: pink; } li { flex: 1; list-style: none; height: 100px; line-height: 100px; text-align: center; font-size: 30px; border: 1px solid #fff; }

这时候我们发现问题已经迎刃而解了！

到此这篇关于详解flex布局与position:absolute/fixed的冲突问题的文章就介绍到这了,更多相关flex与position:absolute/fixed冲突内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！