网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

之前笔者在开发项目的过程中就遇到了这个坑,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;
}

效果如下:

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

我们可以发现弹性盒布局已经失效了,那么我们如何解决这个问题呢?
其实很简单,只需要在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的冲突问题

上一篇:CSS3 input框的实现代码类似Google登录的动画效果
下一篇:Flex布局实现div内部子元素垂直居中的示例
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap