詳解flex布局與position:absolute/fixed的沖突問題

發(fā)布時間：2020-08-03 16:28:05 作者：超級吳小迪

這篇文章主要介紹了詳解flex布局與position:absolute/fixed的沖突問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

之前筆者在開發(fā)項目的過程中就遇到了這個坑，flex布局與position:absolute/fixed的沖突問題。后來想到了解決辦法，今天就與大家一起交流一下：

項目實戰(zhàn)：

我們現(xiàn)在想做一個頭部的導航欄，又想用fixed把它固定在上方，又想用彈性盒布局去設置它內(nèi)部的樣式，可是發(fā)現(xiàn)其中的彈性盒布局已經(jīng)失效了。

HTML代碼如下：

<ul>
    <li>協(xié)會簡介</li>
    <li>協(xié)會章程</li>
    <li>協(xié)會架構</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;
}

效果如下：

我們可以發(fā)現(xiàn)彈性盒布局已經(jīng)失效了，那么我們?nèi)绾谓鉀Q這個問題呢？
其實很簡單，只需要在ul的外面再套一個盒子就可以了。然后外層盒子使用定位，內(nèi)層盒子正常使用彈性盒布局。

HTML改變后的代碼為：

<div class="nav-box">    
    <ul>
        <li>協(xié)會簡介</li>
        <li>協(xié)會章程</li>
        <li>協(xié)會架構</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;
}

這時候我們發(fā)現(xiàn)問題已經(jīng)迎刃而解了！

到此這篇關于詳解flex布局與position:absolute/fixed的沖突問題的文章就介紹到這了,更多相關flex與position:absolute/fixed沖突內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

Tag：Flex position:absolute/fixed 沖突

使用Flex布局實現(xiàn)頭部固定內(nèi)容區(qū)域滾動的方法
這篇文章主要介紹了使用Flex布局實現(xiàn)頭部固定內(nèi)容區(qū)域滾動的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小
2020-08-04
詳解flex布局下圖片變形的解決方法
這篇文章主要介紹了詳解flex布局下圖片變形的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
2020-08-04
Flex布局實現(xiàn)div內(nèi)部子元素垂直居中的示例
這篇文章主要介紹了Flex布局實現(xiàn)div內(nèi)部子元素垂直居中的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編
2020-08-03
Flex布局讓子項保持自身高度的實現(xiàn)
這篇文章主要介紹了Flex布局讓子項保持自身高度的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
2020-08-03
讓CSS flex布局最后一行列表左對齊的N種方法(小結)
這篇文章主要介紹了讓CSS flex布局最后一行列表左對齊的N種方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編
2020-07-23
css3 flex布局實現(xiàn)平均分配元素的示例代碼
這篇文章主要介紹了css3 flex布局實現(xiàn)平均分配元素的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編
2020-07-21
flex布局實現(xiàn)上下固定中間滑動的布局方式
這篇文章主要介紹了flex布局實現(xiàn)上下固定中間滑動的布局方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來
2020-07-21
flex是什么及flex布局語法教程詳解
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。這篇文章給大家介紹flex布局語法的相關知識，感興趣的朋友跟隨小編一起看看吧
2020-08-26