之前笔者在开发项目的过程中就遇到了这个坑，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冲突内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！
