zoukankan      html  css  js  c++  java
  • css粘性定位sticky(了解)

    粘性定位可以被认为是相对定位的混合,Sticky粘性的
    语法:

    选择器{position:sticky;top:10px}
    

    粘性定位的特点:
    1.以浏览器的可视窗口为参照点移动元素(固定定位特色)
    2.粘性定位是占有原先的位置(相对定位特点)
    3.必须添加top,left,right,bottom其中一个才生效。

    跟页面滚动搭配使用,兼容性差,IE不支持

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
      <style type="text/css">
      body {
        height: 3000px;
      }
    
      .nav {
        position: sticky;
        top: 0;
         800px;
        height: 50px;
        background-color: pink;
        margin: 100px auto;
    
      }
      </style>
    </head>
    <body>
      <div class="nav">我是导航栏</div>
    </body>
    </html>
    
  • 相关阅读:
    属性选择器
    优先级
    hj_html&css
    hj_解决gpedit.msc不存在的问题
    hj_designPatterns
    hj_ssm
    hj-springmvc
    hj_mybatis
    hj_Python踩坑之旅
    hj_Python学习笔记
  • 原文地址:https://www.cnblogs.com/qjuly/p/13447789.html
Copyright © 2011-2022 走看看