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

Posted 2021-10-09 itlover2013

https://blog.csdn.net/weixin_43606158/article/details/90237258

 

之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下：

项目实战：
我们现在想做一个头部的导航栏，又想用fixed把它固定在上方，又想用弹性盒布局去设置它内部的样式，可是发现其中的弹性盒布局已经失效了。

html代码如下：

<ul>
<li>协会简介</li>
<li>协会章程</li>
<li>协会架构</li>
<li>资料下载</li>
</ul>
1
2
3
4
5
6
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
效果如下：

我们可以发现弹性盒布局已经失效了，那么我们如何解决这个问题呢？
其实很简单，只需要在ul的外面再套一个盒子就可以了。然后外层盒子使用定位，内层盒子正常使用弹性盒布局。

HTML改变后的代码为：
<div class="nav-box">
<ul>
<li>协会简介</li>
<li>协会章程</li>
<li>协会架构</li>
<li>资料下载</li>
</ul>
</div>
1
2
3
4
5
6
7
8
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
这时候我们发现问题已经迎刃而解了！

 

四川省奇呱科技有限公司
关注

6

6

10

专栏目录

 

Ay__________:
ul {
position: fixed;
top: 0;
left: 50%;
/* 位移达到居中效果*/
transform: translateX(-50%);
/* calc 达到15px左右边距效果*/
width: calc(100% - 30px);
/* 剩下部分和博主一样 */
display: flex;
justify-content: space-between;
background: pink;}
这样不加盒子也能达到效果.9 月前回复

————————————————
版权声明：本文为CSDN博主「四川省奇呱科技有限公司」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43606158/article/details/90237258