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;
}

這時候我們發現問題已經迎刃而解了！

以上是“flex布局與position:absolute/fixed的沖突問題有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！