fixed和sticky

Posted lan-yu

tags:

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

 1 <!DOCTYPE html><html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>fixed和sticky</title>
 5     <style type="text/css"></style>
 6     <link rel="stylesheet"href="fixedsticky.css">
 7 </head>
 8 <body>       
 9     <div class="one">fixed</div>
10     <div class="two">sticky</div>
11 </body>
12 </html>
 1 body{
 2     margin:0px;
 3 }
 4   .one {
 5     width:100px;
 6     height:1000px;
 7     background: red;
 8 
 9   }
10   .two{ 
11     position:sticky;
12     width:100px;
13     height:100px;
14     background:blue;
15     top:30px;
16     left:120px;
17   }

技术分享图片技术分享图片

技术分享图片

以上是关于fixed和sticky的主要内容,如果未能解决你的问题,请参考以下文章

position的sticky与fixed

position属性sticky和fixed的区别比较

css CSS Sticky Fixed Footer #CSS #footer #fixed

第六周 Fixed VS Sticky

position:sticky

fixed 与 sticky