如何实现相对于指定父元素的fixed定位

Question

传统的position: fixed;是相对于窗口的，问题有两个要点

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

在移动端开发中遇到如下问题，绿框是H5导航头，蓝框是tab切换，红框内容是一个很长的列表展示。绿框和蓝框都是需要固定定位的，如何实现让蓝框元素相对于红框元素固定定位？（修改蓝框的top值这点当然是容易想到的，但是我觉得并不好，希望实现强化版的固定定位）

Answer 1

position:sticky

Answer 2

换一种思路，红框的顶部是紧跟着蓝框底部，红框overflow-y，绿和蓝框也不需要position。（如http://wxgame.vuggame.com/html/ 移动端环境）

Answer 3

可以换种方法，使用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;
}