css定位新增粘性属性ticky 以及其他的定位

约定不等于承诺〃 2021-09-01 09:09 392阅读 0赞

###                         1：static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性 ###

###                             2：relative   相对于默认位置（即static时的位置）进行偏移，元素并不脱离文档流原本的位置会被保留，其他的元素位置不会受到影响 。 ###

###                           3： absolute表示， ###

###                           1：相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。 ###

###                           2：如果并没有设置了position属性的祖先元素，则此时相对于body进行定位 将会拖标 之前所在的位置不保留 脱离标志文档流 参考首次看到屏幕的位置 。 ###

###                          4： fixed表示，相对于视口浏览器窗进行偏移 这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。 ###

###                          ###

###                      5：position:sticky，粘性属性， ###

###                    效果是一个吸顶效果，可以说是相对定位relative和固定定位fixed的结合； ###

###                    它主要用在对scroll事件的监听上； ###

###                   简单来说，在滑动过程中，某个元素距离其父  元素的距离达到sticky粘性定位的要求时                    (比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 ###

案列:

<!DOCTYPE html>
 <html>
 
 <head>
 <title></title>
 <style>
 .container {
 display: flex;
 }
 
 .right {
 border: 1px solid red;
 width: 100%;
 margin-top: 40px;
 overflow: scroll;
 height: 400px;
 }
 
 nav {
 position: sticky;
 top: 0px;
 }
 </style>
 </head>
 
 <body>
 <div class="container">
 <div class="right">
 <h1>顶部</h1>
 <nav style="background: red;">导航栏</nav>
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 滚一个
 
 
 
 
 到底啦！
 </div>
 </div>
 </body>
 
 </html>