粘性定位 position: sticky

最新推荐文章于 2024-03-07 09:54:14 发布

Wong.Tsing

最新推荐文章于 2024-03-07 09:54:14 发布

阅读量799

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/hdz52013/article/details/98212631

版权

粘性定位结合了相对定位和固定定位的特点，元素在浏览时会在指定阈值前保持相对定位，超过该阈值则变为固定定位。然而，这种定位方式在不同浏览器的兼容性问题需要注意。

摘要由CSDN通过智能技术生成

在这里插入图片描述粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <style>
        * {
            box-sizing: border-box;
        }

        dl {
            margin: 0;
            padding: 24px 0 0 0;
        }

        dt {
            background: #B8C1C8;
            border-bottom: 1px solid #989EA4;
            border-top: 1px solid #717D85;
            color: #FFF;
            font: bold 18px/21px Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 2px 0 0 12px;
            position: -webkit-sticky;
            position: sticky;
            top: -1px;
        }

        dd {

最低0.47元/天解锁文章

Wong.Tsing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
粘性定位 position: sticky

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initi...
复制链接

扫一扫