flex布局与position:absolute/fixed的冲突问题有哪些

小编给大家分享一下flex布局与position:absolute/fixed的冲突问题有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联专注于企业成都全网营销、网站重做改版、桥西网站定制设计、自适应品牌网站建设、H5开发、成都做商城网站、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为桥西等各大城市提供网站开发制作服务。

项目实战：

我们现在想做一个头部的导航栏，又想用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改变后的代码为：

    
    

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