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

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

项目实战：

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

html代码如下：

<ul>    <li>协会简介</li>    <li>协会章程</li>    <li>协会架构</li>    <li>资料下载</li></ul>

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改变后的代码为：

<div class="nav-box">        <ul>        <li>协会简介</li>        <li>协会章程</li>        <li>协会架构</li>        <li>资料下载</li>    </ul></div>

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的冲突问题有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！