在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何實(shí)現(xiàn)相對(duì)于指定父元素的fixed定位

如何實(shí)現(xiàn)相對(duì)于指定父元素的fixed定位

傳統(tǒng)的position: fixed;是相對(duì)于窗口的，問題有兩個(gè)要點(diǎn)

  • 相對(duì)于指定的父元素
  • 固定定位

在移動(dòng)端開發(fā)中遇到如下問題，綠框是H5導(dǎo)航頭，藍(lán)框是tab切換，紅框內(nèi)容是一個(gè)很長的列表展示。綠框和藍(lán)框都是需要固定定位的，如何實(shí)現(xiàn)讓藍(lán)框元素相對(duì)于紅框元素固定定位？（修改藍(lán)框的top值這點(diǎn)當(dāng)然是容易想到的，但是我覺得并不好，希望實(shí)現(xiàn)強(qiáng)化版的固定定位）

clipboard.png

回答
編輯回答
夢(mèng)若殤

position:sticky

2017年7月1日 16:10
編輯回答
墨沫

可以換種方法，使用flex，移動(dòng)端兼容還是不錯(cuò)的。

<div.wrapper>
    <header />
    <div.content__wrapper>
        <div.content__header />
        <div.content />
    </div>
</div>
.wrapper {
    display:flex;
    flex-direction: column;
}
header {
    flex:none;
}
.content__wrapper {
    display:flex;
    flex-direction: column;
}
.content__header {
    flex:none;
}
2018年8月26日 16:51
編輯回答
魚梓

換一種思路，紅框的頂部是緊跟著藍(lán)框底部，紅框overflow-y，綠和藍(lán)框也不需要position。（如http://wxgame.vuggame.com/html/ 移動(dòng)端環(huán)境）

2017年8月22日 08:33