• 技术文章 >Web开发 >css教程

    css中sticky属性有什么特点

    小妮浅浅小妮浅浅2021-07-20 15:16:07原创122

    说明

    1、这个元素并不脱离文档流,仍然保留着元素在文档流中的原始位置。

    2、当元素在容器中滚动超过指定偏移值时,元素固定在容器的指定位置。也就是说,如果你设置了top:50px,当sticky元素到达相对定位元素顶部50px的位置时,固定,不再向上移动。

    3、固定元素的相对偏移是相对于最接近它的带滚动框的祖先元素。如果祖先元素不能滚动,则相对于viewport来计算元素的偏移。

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <title>demo</title>
    <style type="text/css">
    html,body{
    margin: 0;
    padding: 0;
    }
    .fixed{
    line-height: 40px;
    display: flex;
    position: -webkit-sticky;
    position: sticky;/*兼容*/
    top: 0;
    left: 0;
    }
    .fixed li{
    flex: 1;
    text-align: center;
    background-color: #61b0ef;
    }
    ul{
    padding: 0;
    }
    li{
    list-style: none;
    }
    </style>
    </head>
    <body>
    <ul>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第5行</li>
    </ul>
    <ul>
    <li>tab1</li>
    <li>tab2</li>
    <li>tab3</li>
    <li>tab4</li>
    </ul>
    <ul>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    </ul>
    </body>
    </html>

    以上就是css中sticky属性的特点,希望对大家有所帮助。更多css学习指路:css教程

    专题推荐:css sticky
    品易云
    上一篇:css中sticky属性是什么 下一篇:css浮动有哪些特性

    相关文章推荐

    • css和html的区别分析• css中浮动如何理解• css中tag的介绍• js和css有什么区别• css3和less有什么区别• css设置所有标签的方法• css样式冲突的解决办法• css行内样式的介绍• css中流的概念介绍• css文档流的两种特性• css写五角星的方法• css设置溢出不换行的方法• css使用transform垂直对齐• css中position常见的四个属性值• css中sticky属性是什么

    全部评论我要评论

  • 取消发布评论
  • 

    Python学习网