详解flex布局与position：absolutefixed的冲突问题
之前笔者在开发项⽬的过程中就遇到了这个坑，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;
html的flex布局}
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的冲突问题的⽂章就介绍到这了，更多相关flex与position:absolute/fixed冲突内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。