首页 > Web开发 > 详细

CSS布局:sticky定位

时间:2019-12-06 22:42:41      阅读:99      评论:0      收藏:0      [点我收藏+]

stick定位一如其名:它随“正常”文档流而动,直到规定位置,尔后“粘”在那里;或者,当它发现自己可以跟随“正常”文档流而脱离sticky位置时,就果断离开从而加入文档流。

代码与效果如下:

<div  style="height: 200px; overflow:scroll;">
    <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header A</p>
    <p>This is content A</p>
    <p>This is content A</p>
    <p>This is content A</p>
    <p>This is content A</p>

    <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header B</p>
    <p>This is content B</p>
    <p>This is content B</p>
    <p>This is content B</p>
    <p>This is content B</p>
    
    <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header C</p>
    <p>This is content C</p>
    <p>This is content C</p>
    <p>This is content C</p>
    <p>This is content C</p>

    <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header D</p>
    <p>This is content D</p>
    <p>This is content D</p>
    <p>This is content D</p>
    <p>This is content D</p>

</div>

标题行设置了背景色。如果不设置背景色(背景透明),正常文档流的文字就会和标题行文字重叠在一起显示。

sticky定位的元素会遮住滚动而来的“正常”的文档流;后面的sticky元素会覆盖前面的sticky元素,就好像一层层的便利贴。

This is header A

This is content A

This is content A

This is content A

This is content A

This is header B

This is content B

This is content B

This is content B

This is content B

This is header C

This is content C

This is content C

This is content C

This is content C

This is header D

This is content D

This is content D

This is content D

This is content D

CSS布局:sticky定位

原文:https://www.cnblogs.com/byeyear/p/11999334.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!