CSS布局:sticky定位
2023-09-14 09:06:29 时间
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
相关文章
- 激光SLAM定位_有用激光定位吗
- 【说站】css中固定定位fixed是什么
- 仅几 MB,0.0x 毫秒级查询!准确率 99.9% 的离线 IP 地址定位库
- 安全团队的演进及个人定位思考
- css固定定位_css定位布局
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- CSS第五天-定位
- CSS绝对定位7大应用场景实战案例分享
- Java服务异常排查定位大图
- 【CSS】定位 ① ( CSS 三大盒子布局方式 | CSS 定位简介 | 边偏移 | 定位模式 )
- 【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )
- [android] 手机卫士手机定位的原理详解手机开发
- The Shapes of CSS(css的形状)详解编程语言
- 命令Linux vi快速定位:掌握定位命令的秘诀(linuxvi定位)
- 命令行快速技巧:如何定位一个文件
- Oracle行锁定:精准定位数据库安全(oracle行锁定)
- Linux文件搜索——快速定位所需文件(linux搜寻文件)
- Linux文件查找:快速定位您所需内容(linux 文件 查找)
- 以Oracle IN查询精准定位你要的信息(oracle使用in查询)
- Redis空间位置变更实时定位变化(redis频繁更新位置)
- Redis跳表排序极致分数精准定位(redis跳表排序分数)
- CSS顶级技巧大放送,div+css布局必知