CSS之position定位

position属性值

absolute：绝对定位，相对于static定位以外的第一个父元素进行定位
fixed：绝对定位，相对于浏览器窗口
relative：相对定位，相对于正常位置
static：默认值
inherit：从父元素继承
sticky：当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed
（注：top或left必须要有明确的计算值，否则fixed的表现不会出现）

position:sticky

position:sticky存在一个重要的特性：sticky元素效果完全受制于父级元素们

sticky元素特性表现：

1.父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果，原因：改变了滚动容器；主要是为了避免多个滚动互相嵌套时，粘性定位混乱。

2.父级元素设置和粘性定位元素等高的固定的height高度值，或者高度计算值和粘性定位元素高度一样，也没有粘滞效果;

3.同一个父容器中的sticky元素，如果定位值相等，则会重叠；
当粘性定位元素都在同一容器，公用一个粘性约束矩形，滚动时会一个一个往上重叠

4.如果属于不同父元素，而这些父元素正好相连，则会挤开原来的元素，形成依次占位的效果;
当我们的粘性定位元素属于不同容器的时候，就会有多个不同的粘性约束矩形，这些粘性约束矩形正好一个一个排列得很整齐，那么上一个粘性定位元素被滚走，下一个粘性定位元素正好开始有粘性效果

5.sticky定位，根据滚动方向可设置top、bottom、left、right四种效果。

粘性定位的计算规则

1. 流盒（flow box）：粘性定位元素最近的可滚动元素，即非overflow:visible的尺寸盒子；若无可滚动元素，则为浏览器可视窗口。
2. 粘性约束矩形：粘性定位元素的包含块在文档流中呈现的矩形区域和流盒的四个边缘在应用粘性定位元素的left、top、right、bottom属性的偏移计算值后的新矩形的交集。
   

层次滚动效果实现

<article>
    <section>
        <h4>标题1</h4>
        <content>
            <p>内容1...</p>
        </content>
        <footer>网友评论1：...</footer>
    </section>
    <section>
        <h4>标题2</h4>
        <content>
            <p>内容2...</p>
        </content>
        <footer>网友评论2：...</footer>
    </section>
    ...
</article>

article h4, 
h4 {
    position: sticky;
    top: 0;
    z-index: 1;
}
content {
    position: relative;
}
footer {
    position: sticky;
    bottom: 50vh;
    z-index: -1;
}