详解flex布局与position:absolute/fixed的冲突问题

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

项目实战：

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

HT ML 代码如下：

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

CSS代码如下：

ul {
	position: fixed;
  	dis play : flex;
    justify-content: space-between;
    m arg in: 0 15px;
    background: pink;
}
li {
    flex: 1;
    list -s tyle: none;
    h ei ght: 100px;
    line-height: 100px;
    text-align:  center ;
    font- Size:   30px;
    border: 1px solid  # fff;
}

效果如下：

&nbs p;

我们可以发现弹性盒布局已经失效了，那么我们如何解决这个问题呢？
其实很 简单 ，只需要在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;
    mar gin : 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冲突内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 详解flex布局与position:absolute/fixed的冲突问题 全部内容，希望文章能够帮你解决 详解flex布局与position:absolute/fixed的冲突问题 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于详解flex布局与position:absolute/fixed的冲突问题的详细内容...