欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間：2020-08-03 16:28:05   作者：超級(jí)吳小迪   我要評(píng)論
這篇文章主要介紹了詳解flex布局與position:absolute/fixed的沖突問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

項(xiàng)目實(shí)戰(zhàn)：

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

HTML代碼如下：

<ul>
    <li>協(xié)會(huì)簡(jiǎn)介</li>
    <li>協(xié)會(huì)章程</li>
    <li>協(xié)會(huì)架構(gòu)</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這個(gè)問題呢？
其實(shí)很簡(jiǎn)單，只需要在ul的外面再套一個(gè)盒子就可以了。然后外層盒子使用定位，內(nèi)層盒子正常使用彈性盒布局。

HTML改變后的代碼為：

<div class="nav-box">    
    <ul>
        <li>協(xié)會(huì)簡(jiǎn)介</li>
        <li>協(xié)會(huì)章程</li>
        <li>協(xié)會(huì)架構(gòu)</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;
}

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

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

相關(guān)文章

  • 使用Flex布局實(shí)現(xiàn)頭部固定內(nèi)容區(qū)域滾動(dòng)的方法

    這篇文章主要介紹了使用Flex布局實(shí)現(xiàn)頭部固定內(nèi)容區(qū)域滾動(dòng)的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小
    2020-08-04

  • 詳解flex布局下圖片變形的解決方法

    這篇文章主要介紹了詳解flex布局下圖片變形的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)
    2020-08-04

  • Flex布局實(shí)現(xiàn)div內(nèi)部子元素垂直居中的示例

    這篇文章主要介紹了Flex布局實(shí)現(xiàn)div內(nèi)部子元素垂直居中的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編
    2020-08-03

  • Flex布局讓子項(xiàng)保持自身高度的實(shí)現(xiàn)

    這篇文章主要介紹了Flex布局讓子項(xiàng)保持自身高度的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)
    2020-08-03

  • 讓CSS flex布局最后一行列表左對(duì)齊的N種方法(小結(jié))

    這篇文章主要介紹了讓CSS flex布局最后一行列表左對(duì)齊的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編
    2020-07-23

  • css3 flex布局實(shí)現(xiàn)平均分配元素的示例代碼

    這篇文章主要介紹了css3 flex布局實(shí)現(xiàn)平均分配元素的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編
    2020-07-21

  • flex布局實(shí)現(xiàn)上下固定中間滑動(dòng)的布局方式

    這篇文章主要介紹了flex布局實(shí)現(xiàn)上下固定中間滑動(dòng)的布局方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來
    2020-07-21

  • flex是什么及flex布局語(yǔ)法教程詳解

    Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。這篇文章給大家介紹flex布局語(yǔ)法的相關(guān)知識(shí)，感興趣的朋友跟隨小編一起看看吧
    2020-08-26

最新評(píng)論