当display:flex弹性布局与position:absolute/fixed定位一起用，会出现的问题与解决方法

最新推荐文章于 2022-09-07 10:23:12 发布

qq_27717857

最新推荐文章于 2022-09-07 10:23:12 发布

阅读量9.8k

点赞数 8

分类专栏： css 文章标签： css

css 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

首先放出使用场景的截图：

使用场景

导航栏固定定位

导航栏内，平均分为四块，为了适配各种移动设备，使用了flex布局。
与此同时，产品经理要求：页面上滚越过封面图时，导航栏变为固定定位，浮在页面顶部。
拿到需求之后，思路就是先搞好布局，然后监听window.onscroll，当页面滚的距离大于封面图的时候，给ul加入position：fixed。

下面再现一下问题：

<!--DOM结构：-->
<body>
    <h1>flex布局与position:absolute/fixed踩坑</h5>
    <ul>
        <li>协会简介</li>
        <li>协会章程</li>
        <li>协会架构</li>
        <li>资料下载</li>
    </ul>
</body>

//主要的样式
<style>
        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;
        }
    </style>

当单独使用display: flex 时，是没有问题的。

对ul使用了display：flex

当对ul加入position：absolute/fixed时，再来看一下页面变化，我录了gif图直观的感受下flex失效的过程~~~：

flex与position:absolute/fixed 同时作用于ul

所以，被绝对定位与固定定位的盒子不参与flex布局。（注意不包括相对定位哦~）

划重点！这个问题怎么解决呢？
既然被定位的盒子不参与flex，那就在这个盒子外面套一个盒子，给外层盒子使用定位，内层没有使用定位的盒子继续使用flex。这样不就解决了~~~哦对了！还要给外层盒子设置宽度，100%就好啦！

<!--新的DOM结构：-->
<body>
    <h1>flex布局与position:absolute/fixed踩坑</h5>
    <div class="nav-box">    
        <ul>
            <li>协会简介</li>
            <li>协会章程</li>
            <li>协会架构</li>
            <li>资料下载</li>
        </ul>
    </div>
</body>

<!--样式设置：-->
       .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;
        }

作者：南客nk
链接：https://www.jianshu.com/p/13ede74010dd
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

qq_27717857

关注

8
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
当display:flex弹性布局与position:absolute/fixed定位一起用，会出现的问题与解决方法

首先放出使用场景的截图：使用场景导航栏固定定位导航栏内，平均分为四块，为了适配各种移动设备，使用了flex布局。与此同时，产品经理要求：页面上滚越过封面图时，导航栏变为固定定位，浮在页面顶部。拿到需求之后，思路就是先搞好布局，然后监听window.onscroll，当页面滚的距离大于封面图的时候，给ul加入position：fixed。下面再现一下问题：&l...
复制链接

扫一扫