关于固定定位与粘性定位的详解（子篇章）

最新推荐文章于 2023-03-03 09:51:47 发布
最新推荐文章于 2023-03-03 09:51:47 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： css 前端 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47966295/article/details/113758963
版权
前端 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
css
5 篇文章 0 订阅
订阅专栏

补上一些学习笔记，内容不多也算是做一个总结（目前正在努力学习前端、查缺补漏）

本篇文章主要谈谈自己对于Css定位的理解

本篇文章讲解相对定位，为单独一篇详细讲解

往期

主篇章

文章目录

固定定位（fixed）

相对于浏览器固定某个元素不随着滚动条的滚动而滚动

固定定位是脱离标准流的（脱标）

相对于浏览器固定某个元素不随着滚动条的滚动而滚动

例子代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 400px;
            height: 400px;
            background-color: skyblue;

        }

        .b {
            width: 200px;
            height: 200px;
            background-color: seagreen;
        }

        .fixed {
            width: 300px;
            height: 300px;
            background-color: springgreen;
            /* 固定定位 */
            position: fixed;
            /* 偏移 */
            left: 600px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="a"></div>
    <div class="b"></div>
</body>

</html>

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：
此处没有用动图展示，实际效果可以去自己运行跑一下！

效果1
效果2

验证固定定位是脱离标准流的（脱标）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 400px;
            height: 400px;
            background-color: skyblue;

        }

        .b {
            width: 200px;
            height: 200px;
            background-color: seagreen;
        }

        .fixed {
            width: 300px;
            height: 300px;
            background-color: springgreen;
            /* 固定定位 */
            position: fixed;
            /* 偏移 */
            top: 20px;
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="a"></div>
    <div class="b"></div>
</body>

</html>

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：

验证固定定位是脱离标准流的

粘性定位（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>
    <style>
        .sticky {
            width: 300px;
            height: 300px;
            background-color: springgreen;
            margin: 300px auto;
            /* 固定定位 */
            position: sticky;
            /* 偏移 */
            top: 0;
        }
    </style>
</head>

<body>
    <div class="sticky"></div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
</body>

</html>

效果就是当滚动条下滑时，绿色矩形距离顶部为0时固定不动

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距）：

此处没有用动图展示，实际效果可以去自己运行跑一下！
效果1
效果2
效果3

陈适时
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
固定定位和粘性定位还有锚点案例
11-20
固定定位和粘性定位还有锚点用法案例
CSS定位五种显示方式（主要解释固定定位和粘性定位）
世界和我们都不该止步于此
03-07 1035
定位的五个显示方式【主讲固定定位（fixed）和粘性定位（sticky）】
固定定位（fixed）和粘性定位（sticky）的比较
weixin_51093047的博客
09-18 2220
了解fixed和sticky的区别
固定定位和粘滞定位
weixin_65607135的博客
08-15 711
粘滞定位必须配合top使用；例如上面代码，当top值没有到50px时，他就被固定了，这就是粘滞定位。(4)配合top值设置，没有达到top值之前正常显示，随着滚动条滚动而滚动，-当元素的position属性设置为sticky时，则开启了元素的粘滞定位。不管你怎么滑动鼠标，黄色的盒子一直就是在这个位置固定住了，这就是固定定位。当元素的position属性设置fixed时，则开启了元素的固定定位。（3）固定定位不占有原来的位置，即脱离标准流 ，更改元素的性质。（3）粘滞定位可以在元素到达某个位置时，将其固定。.
简单理解sticky定位与fixed定位的区别
qq_53722426的博客
10-20 4318
fixed:固定定位，相对于可视窗口定位，一但使用top，left绑定后，无论怎么滚动可视窗口区域（也就是滑动滚动条），它的位置都不会发生变化 sticky:粘性定位，相当于是相对定位和固定定位的结合，既有相对定位的保留自己原来位置的特点又有固定定位相对于可视窗口定位的特点，必须至少含有top，left，right，bottom中一个进行绑定，比如说position:sticky top:100px; margin-top:400px 那么就是说这个小盒子初始情况距离顶部400px，在向下滚动30...
CSS 定位（静态、固定、相对、绝对、粘性）
Ares5k
04-08 736
静态定位、固定定位、相对定位、绝对定位、粘性定位
定位详解（固定定位，粘滞定位）
BambooStrip的博客
08-15 3595
css定位详解篇二
背景图片粘性定位案例图
03-14
其中含有粘性定位和锚点等
详解CSS粘性定位 sticky
12-11
简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)； position:sticky这时的效果相当于fixed定位，固定到适当位置 讲 sticky 定位之前，我先说一下position 的其他...
CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
01-08
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的...
详解css粘性定位position：sticky问题采坑
12-14
简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 使用： #sticky-nav { position: sticky; top: ...
css的定位属性——固定定位和粘性定位
weixin_46579411的博客
03-30 3519
一、固定定位 position:fixed; 【固定定位】 a: 参照物：浏览器窗口。 b: 不占据空间，脱离布局流。 （注：如果块状元素没有设置宽度的时候，添加position:absolute 或position:fixed会出现宽度被内容撑开） 让一个元素在浏览器窗口左右上下居中？ 第一种方法： position:fixed; left:50%;top:50%; margin-left:-...
position:sticky 粘性定位
热门推荐
卿本无忧的博客
03-03 1万+
position:sticky 粘性定位
元素定位（绝对、相对、粘滞、固定）
comegoing_xin_lv的博客
08-04 1170
绝对、相对、粘滞、固定定位，非文档流、浮动
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
m0_71491195的博客
07-20 1万+
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
2020-10-28 CSS（五）定位
ttxwwdn的博客
10-29 242
学习目标： 定位 学习内容： 1.1 为什么需要定位 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。 1.2 定位组成 定位 = 定位模式 + 边偏移 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 定位模式 定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个： 值 语义 static 静态定位
详解CSS定位方式
Dax1_的博客
03-23 216
定位方式 position属性有五个属性值，分别代表五种定位方式 static 静态定位 relative 相对定位 fixed 固定定位 absolute 绝对定位 sticky 粘性定位 static 静态定位 static是position属性的默认值，若省略position属性，则默认是静态定位。 静态定位下的元素为标准流，即按照元素的顺序来决定每个元素的位置，元素与元素之间不会产生重叠。 relative 相对定位 相对定位，是相对默认位置进行偏移，即定位基点为元素的默认位置。 必须搭配
一看就懂，关于HTML5里面的定位 （position ）相对定位，绝对定位，固定定位 ，粘性定位；有图有对比 值得你的信赖（一个在千锋逆战班奋斗的年轻人）
vipdidi的博客
02-23 3132
*HTML5 定位## position:static(默认值)没有定位 position:relative(相对定位) position:absolute(绝对定位) Position:fixed(固定定位) position:sticky(粘性定位)（css3新增兼容不好） 作用 A.在正常情况下.可以让一个元素覆盖在另一个元素上面 B.可可以移动一个元素的位置 C.可以固定某个容器在浏览...
块元素居中方式
gklcsdn的博客
12-10 757
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
CSS粘性定位怎么使用
最新发布
07-12
CSS粘性定位是一种介于相对定位和固定定位之间的定位方式，它可以使元素在滚动时保持在指定位置。要使用粘性定位，可以按照以下步骤进行操作： 1. 首先，在CSS中选中要应用粘性定位的元素。可以使用类名、ID或标签名来选中元素。 2. 接下来，使用position属性设置元素的定位方式为sticky（粘性）。例如： ``` .sticky-element { position: sticky; top: 20px; /* 设置元素距离顶部的距离 */ } ``` 3. 确定元素的定位参考点。默认情况下，粘性定位会相对于父元素进行定位，但也可以通过设置其他元素作为参考点。可以使用z-index属性来控制元素的层叠顺序。 4. 最后，根据需要设置其他样式，如宽度、高度、背景色等。 注意事项： - 粘性定位只在支持该特性的浏览器中生效，老版本的浏览器可能不支持。 - 粘性定位的元素在其父元素范围内滚动时才会起作用，如果父元素没有滚动条，则粘性定位无效。 - 粘性定位的元素会在滚动到特定位置后变为固定定位，可使用top、bottom、left和right属性来调整元素的位置。 希望以上解答对你有所帮助！如果还有其他问题，可以继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值