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

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

傳統(tǒng)的position: fixed;是相對于窗口的，問題有兩個要點

  • 相對于指定的父元素
  • 固定定位

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

clipboard.png

回答
編輯回答
夢若殤

position:sticky

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

可以換種方法，使用flex，移動端兼容還是不錯的。

<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
編輯回答
魚梓

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

2017年8月22日 08:33