首页 > 作文

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

更新时间:2023-04-07 13:16:39 阅读: 评论:0

之前笔者在开发项目的过程中就遇到了这个坑,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-betw阅读笔记模板een;    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冲突内容请搜考研寄语索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!

本文发布于:2023-04-07 13:16:37,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/fb4309d11b8ac8c07e0cf372e09e07d8.html

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

本文word下载地址:详解flex布局与position:absolute/fixed的冲突问题.doc

本文 PDF 下载地址:详解flex布局与position:absolute/fixed的冲突问题.pdf

标签:布局   协会   弹性   代码
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图