粘性定位

bootstrap的官方解释： Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top utility uses CSS’s position: sticky, which isn’t fully supported in all browsers.
IE11 and IE10 will render position: sticky as position: relative. As such, we wrap the styles in a @supports query, limiting the stickiness to only browsers that can render it properly.
sticky在mdn上的解释为
image.png
如果是固定在视口的导这也是为什吗在boostrap中需要把它放在body下的第一层级中
示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         body{
  9.             height: 5000px;
  10.         }
  11.         .container{
  12.             height: 300px;
  13.             border: 1px solid black;
  14.             margin-top: 100px;
  15.             overflow: scroll;
  16.         }
  17.         .sticky{
  18.             display: inline-block;
  19.             position: sticky;
  20.             left: 0;
  21.             top: 0;
  22.             width: 100px;
  23.             height: 100px;
  24.             background: red;
  25.         }
  26.         .sticky2{
  27.             left: 100px;
  28.             background: gray;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="container">
  34.         <div class="sticky"></div>
  35.         <div style="height: 3000px;"></div>
  36.     </div>
  37.     <div class="sticky sticky2"></div>
  38. </body>
  39. </html>