html 粘性定位 - 新位置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 粘性定位 - 新位置相关的知识,希望对你有一定的参考价值。

<style>
.box {
  width:200px;
  top: 20px;
  position: sticky;

}
</style>

<div class="container">
            <div class="box">
                <p>I am a sticky position box. I will display in my static position, but when the document scrolls and I reach 20 pixels from the top of the viewport, I become stuck to that location.</p>
            </div>

             <p>One of the first questions the visitor to an aerodrome, when watching the altitude tests, asks is: "How is it known that the airman has risen to a height of so many feet?" Does he guess at the distance he is above the earth?</p>
        <p>If this were so, then it is very evident that there would be great difficulty in awarding a prize to a number of competitors each trying to ascend higher than his rivals.</p>
</div>

以上是关于html 粘性定位 - 新位置的主要内容,如果未能解决你的问题,请参考以下文章

position sticky 定位

如何将粘性定位元素移出父div?

sticky吸顶效果-真香

CSS粘性定位

讲讲相对定位、绝对定位、固定定位的理解?

粘性布局 position:sticky