没有合适的资源?快使用搜索试试~ 我知道了~
详解flex布局与position:absolute/fixed的冲突问题
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 3 下载量 137 浏览量
2021-01-19
03:29:15
上传
评论
收藏 77KB PDF 举报
温馨提示
试读
1页
之前笔者在开发项目的过程中就遇到了这个坑,flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法,今天就与大家一起交流一下: 项目实战: 我们现在想做一个头部的导航栏,又想用fixed把它固定在上方,又想用弹性盒布局去设置它内部的样式,可是发现其中的弹性盒布局已经失效了。 HTML代码如下: <ul> <li>协会简介</li> <li>协会章程</li> <li>协会架构</li> <li>资料下载</li> </ul> CSS代码如下: ul { position: fixed; display: flex;
资源推荐
资源详情
资源评论
详解详解flex布局与布局与position:absolute/fixed的冲突问题的冲突问题
之前笔者在开发项目的过程中就遇到了这个坑,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;
}
这时候我们发现问题已经迎刃而解了!
weixin_38652636
- 粉丝: 6
- 资源: 896
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页