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