CSS 基础学习-126 css使用position:sticky;属性设置粘性定位

由 hrs, 24 十月, 2021

使用position:sticky;属性设置粘性定位

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      div.sticky{
        border:2px solid green;
        background-color:pink;
        padding:10px;
         position:sticky;
         top:0;
      }   
      div{
        width:600px;
      }   
  </style>
  </head>
  <body>
    <p>请试着在这个框架内<b>滚动</b>页面，以理解粘性定位的原理。</p>
    <div class="sticky">我是有粘性的</div>
    <div style="padding-bottom:2000px">
    <p>在些例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top：0）。</p>
    <p>向上滚动以消除粘性。</p>
    <p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    </div>
  </body>
</html>

运行效果；

css-216.png

标签

评论