详解flex布局与position:absolutefixed的冲突问题

更新时间:2023-08-08 03:52:11 阅读: 评论:0

详解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;
}
资金集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冲突内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章,希望⼤家以后多多⽀持!

本文发布于:2023-08-08 03:52:11,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/1127856.html

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

标签:协会   冲突   问题   布局   弹性   相关   过程
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图