美文网首页
css粘性定位position: sticky

css粘性定位position: sticky

作者: 理子 | 来源:发表于2020-06-10 17:00 被阅读0次

css粘性定位position:sticky问题采坑
position: sticky 详解(防坑指南)
CSS中position属性(sticky)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="a"></div>
        <div class="b">我是你爸爸</div>
        <div class="c"></div>
        <div class="d"></div>
    </div>
</body>
<style>
    .a{
        height: 200px;
        background-color: greenyellow;
    }

    .b{
        height: 20px;
        background-color: red;
        position: sticky;
        position: -webkit-sticky;
        top: 0;
    }

    .c{
        height: 2100px;
        background-color: blue;
    }

    .d{
        height: 600px;
        background-color: yellow;
    }
</style>
</html>

相关文章

  • css粘性定位position: sticky

    css粘性定位position:sticky问题采坑position: sticky 详解(防坑指南)CSS中po...

  • sticky吸顶

    position: sticky(粘性定位) 粘性定位 sticky 相当于相对定位 relative 和固定定位...

  • 粘性定位

    粘性定位 position:sticky 一个定位的奇葩, 设置position:sticky同时给一个(t...

  • position:sticky粘性布局

    position:sticky粘性布局 作用 它是相对定位position:relative和固定定位positi...

  • CSS Sticky

    sticky原意为“粘贴的”,属于CSS3中position定位属性新增的一个属性值,称之为粘性定位,它是结合re...

  • position:sticky粘性定位

    最近项目中遇到一个需要置顶导航栏的问题,一顿操作用js写好了之后偶然间发现css居然新增了一条属性可以实现同样的效...

  • 类型和位置

    position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 positio...

  • css3的粘性定位position:sticky

    前言 项目中,往往会遇到类似这样的需求:网页的导航栏一开始距离浏览器顶部100px,当页面向上滑动后,导航栏跟随页...

  • 彻底理解粘性定位 - position: sticky

    粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的...

  • css新增属性position:sticky

    position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它...

网友评论

      本文标题:css粘性定位position: sticky

      本文链接:https://www.haomeiwen.com/subject/llpptktx.html