css中position:sticky属性

最新推荐文章于 2024-06-17 18:04:45 发布
最新推荐文章于 2024-06-17 18:04:45 发布
阅读量290 收藏
点赞数
分类专栏： css 文章标签： javascript 前端 es
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42931285/article/details/123726234
版权

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见Github issue on W3C CSSWG）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 粘性定位 */
        /* 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定值前被认为是相对定位，之后为固定定位 */
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 2000px;
        }
        div{
            text-align: center;
            line-height: 40px;
        }
        .header{
            height: 40px;
            width: 100%;
            background-color: yellow;
            position: fixed;
            top: 0;
        }
        .banner{
            height: 580px;
            background-color: rosybrown;
            margin-top: 40px;
        }
        .nav{
            height: 40px;
            background-color: royalblue;
            position: sticky;
            top:40px;
        }
    </style>
</head>

<body>
    <div class="header">
        头部
    </div>
    <div class="banner">
        banner区域
    </div>
    <div class="nav">
        导航栏
    </div>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

_处女座程序员的日常
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS position:sticky
快乐de馒头
01-21 507
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 例如： 主要代码： position: sticky...
JS解决position:sticky的兼容性问题的方法
11-30
在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...
CSS定位（position））之sticky 定位
Serena_tz的博客
02-25 2386
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bo
CSS属性 sticky 粘性定位：固定导航
最新发布
(黎子)人生编码
06-17 887
position: sticky属性让元素根据用户的滚动位置相对页面视口固定，即使它的父元素不是固定定位的。
CSS中position属性介绍(新增sticky)
08-22 4168
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。1、position: static　　static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: re
css粘性定位position:sticky
浩星
08-10 2366
前言： css3中有一个很有趣的属性position:sticky，粘性属性，效果是一个吸顶效果，可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时 (比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 ***注意，这个兼容性特别不好 效果图： 基本用法： nav{ position:st...
CSS position:sticky（粘性）
布鲁斯基的精炼代码本
09-12 1174
sticky = relative + fixed 两种 position 的混合。 当一个元素的 position: sticky 时，它首先会被当成是 position: relative，当用户滚动页面时，元素跟着它的父元素一起滚动。直到元素与浏览器窗口（视区）的顶部距离小于指定的数值时（比如 top: 10px ），该元素就被认为是 position: fixed。 以前需要用 JS ...
CSS使用position:sticky 实现粘性布局的方法
12-14
在CSS布局中，`position: sticky` 是一种特殊定位方式，它结合了 `position: relative` 和 `position: fixed` 的特性，适用于某些特定场景。`position: sticky` 在元素滚动到某个阈值之前表现得像 `position: ...
详解css粘性定位position：sticky问题采坑
12-14
使用`position: sticky`的正确语法是给元素设置`position: sticky`并配合`top`, `bottom`, `right`, 或 `left`中的一个属性。例如： ```css #sticky-nav { position: sticky; top: 100px; } ``` 使用`position: ...
CSS position: sticky; 粘性定位初识
MrLiber的博客
12-13 3911
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position position:sticky;是粘性定位，新的定位方式，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 #box { position: sticky; top: 10px; }...
【前端基础系列】CSS篇-带你了解position:sticky
Web面试那些事儿的博客
01-01 3009
如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是staticrelativeabsolutefixed，实际上MDN上还有一个sticky。今天我们就来给大家介绍这个容易被忽视的position属性值sticky。先来看看MDN上对于sticky的介绍：粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。粘性定位可以被认为是相对定位和固定定位的混合。什么是结合两种定位功能于一体呢？
css粘性定位position：sticky
MichaelAn的博客
02-13 1261
css粘性定位position：sticky 前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；pos...
CSS：深入理解粘性定位 position: sticky
热门推荐
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
CSS position的sticky定位
qq_53612668的博客
10-31 578
position: sticky -粘性定位(是css新增的一个position属性) 使用注意事项： 父元素不能有 overflow 属性 left、top、right、bottom必须要设置一个 仅在父元素内生效，父元素的高度必须大于sticky元素设置的高度 简单理解就是，当你页面滚动的距离小于你设置的 left、top、right、bottom的值时 position: sticky 就相当于 position:relative 当你页面滚...
css position的sticky定位
Smallwhitestrive的博客
09-12 1716
css position的sticky定位 position: sticky -粘性定位(是css新增的一个position属性) 使用注意事项： 父元素不能有 overflow 属性 left、top、right、bottom必须要设置一个 仅在父元素内生效，父元素的高度必须大于sticky元素设置的高度 简单理解就是，当你页面滚动的距离小于你设置的 left、top、right、bottom的值时 position: sticky 就相当于 position:relative
涨知识啦：css粘性定位position：sticky
sinat_33255495的博客
06-03 624
最近学习了一个新的 css 属性：position：sticky。在开发中还是蛮实用的，记录下来，分享给需要的小伙伴。 知识点 position: sticky; 基于用户的滚动位置来定位。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 需要注意的是想用它，必须要设置一个方向值（top, left, right, bottom） 场景描述 我写了一
css position: sticky 使用方法
young_sam的博客
04-21 636
效果图 代码 <section> <h2>I am sticky</h2> <p>Blood, Sweat And Tears Winston Churchill May 13, 1940 On Friday evening last I received from His Majesty the mission to form a new administration. It was the evident will of Parl
CSS - position:sticky
kelly0721的博客
03-12 336
CSS3 新出的 position：sticky 还是挺好用的，所以记录一下用法 一、简介 sticky属性依赖于用户的滚动，对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。 常用场景 当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定
css position：sticky
weixin_56008510的博客
11-01 102
在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。在向下滚动时，粘性定位盒子会先固定在屏幕顶部，直到所有 粘性定位盒子 的项均完成滚动后，才被 下面的盒子替代。元素在跨越特定阈值前为相对定位，之后为固定定位。相对定位和固定定位的混合。粘性定位可以被认为是。
css中的position: sticky介绍
05-26
`position: sticky` 是 CSS 中的一种定位属性，它可以让元素在滚动时停留在指定位置，直到达到指定的位置后再继续滚动。这种定位属性类似于 `position: fixed` 和 `position: relative` 的结合体。 `position: sticky` 的工作原理是：当元素滚动到特定位置时，它会保持在该位置并固定，直到滚动回到该元素的 `sticky` 区域之外。如果该元素没有足够的空间来固定在屏幕上，则它将在其父元素内滚动。 使用 `position: sticky` 可以实现很多有用的效果，如固定导航栏、表头和侧边栏等元素。这种定位属性的兼容性良好，支持大多数现代浏览器，但在一些旧版本浏览器中可能不被支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值