CSS-sticky布局

position: sticky; top:0;功能:
1)正常情况下, sticky元素在页面中正常布局;
2)当sticky元素顶部距离浏览器页面顶部为设定值(此处为0)时, 表现得像fixed;
3)当sticky元素底部与包裹它的容器底部相触时, 恢复正常;
以下示意图可以更好的感受到它的效果:
CSS-sticky布局_第1张图片

demo代码:





    
    
    
    Document
    



    
        
header
content

你可能感兴趣的:(css)