CSS的定位方式有哪几种？详解sticky粘性定位！！！

最新推荐文章于 2022-10-15 14:29:12 发布
置顶 最新推荐文章于 2022-10-15 14:29:12 发布
阅读量1.1k 收藏 4
点赞数 2
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45844049/article/details/116195675
版权

css有五种定位方式，分别是：static， relative，absolute，fixed 和 sticky。

1. static 静态定位

HTML 元素的默认值，指定元素使用正常的布局行为。

静态定位的元素 top, right, bottom, left 和 z-index 属性无效。

2. relative 相对定位

相对定位是相对于默认位置（即static时的位置）进行偏移。

相对定位元素经常被用来作为绝对定位元素的容器块。

3. absolute 绝对定位

绝对定位元素会被移出正常文档流，并不为元素预留空间。

相对于上级元素（一般是父元素）进行偏移。

通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，如果元素没有已定位的父元素，那么它的位置相对于<html>。

4. fixed 固定定位

固定定位元素会被移出正常文档流，并不为元素预留空间。

相对于视口（viewport，浏览器窗口）进行偏移。

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动，打印时，元素会出现在的每页的固定位置。

5. sticky 粘性定位

粘性定位跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

sticky 粘性定位 详解

当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 50px 时，元素以 relative 定位表现，而当元素距离页面视口小于 50px 时，元素表现为 fixed 定位，也就会固定在顶部。

代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <style>
    .aaa {
      padding: 100px;
    }

    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 50px;

      padding: 5px;
      background-color: #cae8ca;
      border: 2px solid #4CAF50;
    }
  </style>
</head>

<body>

  <p>尝试滚动页面。</p>
  <p class="aaa">注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

  <div class="sticky">我是粘性定位!</div>

  <div style="padding-bottom:2000px">
    <p>滚动我</p>
    <p>来回滚动我</p>
    <p>滚动我</p>
    <p>来回滚动我</p>
    <p>滚动我</p>
    <p>来回滚动我</p>
  </div>

</body>

</html>

效果：
在这里插入图片描述
表现方式如下：
距离页面顶部大于20px，表现为 position:relative;
在这里插入图片描述
距离页面顶部小于20px，表现为 position:fixed;
在这里插入图片描述

  • https://www.runoob.com/css/css-positioning.html
  • https://www.jb51.net/css/598347.html

粘性定位的注意事项

先看一个例子，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{			/*重置样式*/
				margin: 0;
				padding: 0;
			}
			dl{			/*dl是父元素*/
				padding-top: 24px;/*设置字距离盒子距离*/
			}
			dt{			/*设置粘性定位元素*/
				background: orange;/*背景颜色*/
				color:#fff;/*字体颜色*/

				position: sticky;/*设置粘性定位*/
				top:10px;/*设置粘性定位达到偏移量固定位置*/
			}
		</style>
		
	</head>
	<body>
		<div>
			<dl>
				<dt>A</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>B</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>C</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>D</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>E</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F1</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F2</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F3</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F4</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F5</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F6</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F7</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
            <dl>
				<dt>F</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F1</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F2</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F3</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F4</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F5</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F6</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F7</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
		</div>
	</body>
</html>

效果：
在这里插入图片描述
同一容器中多个粘贴定位元素独立偏移，因此可能重叠；位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果（这个下面会具体讲到）。

第一个特性源自粘性定位的定义，这么设计主要是为了避免当多个滚动互相嵌套的时候，粘性定位混乱。

第二个特性原因就是本文提到的粘性定位的计算规则，具体解释：

当我们的粘性定位元素都在一个容器的时候，大家都公用一个巨大的粘性约束矩形，因此，滚动的时候会一个一个往上重叠。

当我们的粘性定位元素属于不同容器的时候，就会有多个不同的粘性约束矩形，这些粘性约束矩形正好一个一个排列得很整齐，于是视觉上达成一个巧合一般的约定，即上一个粘性定位元素被滚走，下一个粘性定位元素正好开始有粘性效果。

参考

  • https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/
圆圆01
关注
专栏目录
css定位有哪几种方式
Ggg_xx的博客
03-21 2666
css定位有哪几种方式关于定位1.默认值：staic2.绝对定位：absolute3.相对定位4.固定定位5.粘性定位 关于定位 定位position是文档流的一种，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 定位主要有5种方式，分别为 staic：默认值，absolute：绝对定位， relative：相对定位，fixed：固定定...
CSS的几种定位方式
liu0513916的博客
10-10 1万+
CSS 为定位提供了一些属性，利用这些属性，可以建立列式布局。 css定位的几种方式： 1、static（静态定位）： 默认值。没有定位，当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流； 2、relative（相对定位）： 定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有
CSS中的四种定位方式
热门推荐
m0_71074684的博客
07-11 1万+
CSS中的四种定位方式
CSS之position定位
qq_33554950的博客
02-27 329
CSS之position定位position属性值position:sticky粘性定位的计算规则层次滚动效果实现 position属性值 absolute：绝对定位，相对于static定位以外的第一个父元素进行定位 fixed：绝对定位，相对于浏览器窗口 relative：相对定位，相对于正常位置 static：默认值 inherit：从父元素继承 sticky：当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed （注：top或left必须要有明确的计算值，否则fixed的
CSS中的定位有哪几种方式？
weixin_46619264的博客
03-27 431
在css中，很多情况下我们都会用到定位属性，下面我来分享一下定位的几种属性。 一、position:relative;相对定位 该属性是参考自身加载在页面的位置，如下图所示 在图中，红色区块设置了position:relative;它参考自身在浏览器中加载的位置，受底部区域元素影响。 一、position:absolute;绝对定位 该属性默认是参考浏览器零点的位置（若有父级元素则参考父级元素）...
详解CSS粘性定位 sticky
12-11
CSS粘性定位（sticky positioning）是CSS布局中的一种特性，它允许元素在用户滚动页面时在特定条件下保持可见。在CSS中，`position: sticky`是实现这一效果的关键。这个属性可以看作是`static`（无定位）和`fixed`...
详解css粘性定位position：sticky问题采坑
12-14
CSS中的`position: sticky`是一种混合定位方式，它结合了`relative`和`fixed`的特点。在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕...
CSS 元素定位详解与实战应用
最新发布
10-09
本文详细讲解了 CSS 中多种元素定位的方法及其应用场景，具体涉及静态定位(static)，相对定位(relative)，绝对定位(absolute)，固定定位(fixed)以及粘性定位(sticky)，同时解释了每种定位方式的工作机制和相关属性...
css position 设置元素的定位方式详解
12-13
CSS的 position 属性设置元素的定位方式，为将要定位的元素定义定位规则。该属性对脚本编写动画特效十分有用。 1、定位元素（positioned element)是计算后位置属性分为： relative（相对）、absolute（绝对） 、 ...
CSS中的 position属性sticky详解
11-21
在CSS世界里，`position`属性是一个至关重要的样式规则，用于定义元素的定位方式。它提供了多种定位选项，包括`static`、`relative`、`absolute`、`fixed`、`inherit`以及我们今天要深入探讨的`sticky`。`position: ...
CSS定位有哪几种方式
xk0403的博客
03-22 200
CSS定位有哪几种方式 说到定位相信大家都不陌生，它是我们在页面布局当中必不可少的一部分，那么什么是定位，它又有哪几种方式呢，下面就和大家一起来探讨一下 什么是定位 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。 定位的几种方式 position:static 默认值 po...
css定位哪几种方式
Adelam的博客
03-21 542
css定位有哪几种 1.position:static;默认值 2.position: absolute;绝对定位 3.position:relative;相对定位 4.position:fixed;固定定位 5.position:sticky;粘性定位 特征 position:static; 默认值，设置坐标无效 position: absolute; 1：脱离文档流，占位置 ...
css定位有哪几种方式？
wq2714的博客
02-22 1116
css中相关的定位： 相信很多的初学者和我一样在刚接触有关浮动和定位都有些搞不清楚，在这里我将介绍一下我所理解的有关 css的定位方式。 在css中浮动主要是解决一些有关布局的左右排列问题，其实定位的作用和浮动的作用差不多，不过区 别是定位用来解决叠加排列的问题。 在用定位时，你需要写position属性，position 属性规定元素的定位类型。下面来逐一介绍 position属性后面...
CSS有几种定位方式
Meraln的博客
03-04 181
static：正常文档流定位，此时top、right、bottom、left和z-index属性无效，块级元素从上往下纵向排布。 relative：相对定位，此时的“相对”是相对于正常文档流的位置。 absolute：相对于最近的非static定位祖先元素的偏移，来确定元素位置。 fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。 sticky：粘性定位，特性近似于relative和fixed的合体，其在.
CSS的五种定位方式
weixin_45317422的博客
02-23 1342
CSS中一共有五种定位： position：static；默认值 position：absolute；绝对定位 position：relative；相对对定位 position：fixed；固定定位 position：sticky；粘性定位 其中，粘性定位是CSS3新增加的 兼容性比较差 定位的作用： 在正常情况下，可以让一个元素覆盖在另外一个元素上面 可以移动一个元素的位置 可以固定某个容器在...
CSS中常用的几种定位方式
m0_48011056的博客
10-15 4409
CSS中相对定位、绝对定位、固定定位、粘性定位
css定位方式有哪几种
03-29
CSS定位方式有以下几种： 1. 相对定位：相对于元素原本的位置进行移动，不会影响其他元素的布局。 2. 绝对定位：相对于其最近的已定位祖先元素进行定位，如果没有已定位祖先元素，则相对于 body 元素进行定位。 3. 固定定位：相对于浏览器窗口进行定位，不随页面滚动而改变位置。 4. 浮动布局：元素脱离文档流，可以左右浮动，但是会影响其他元素的布局。 5. 弹性布局：通过设置元素的弹性属性来实现不同方向的伸缩性布局。 6. 网格布局：通过定义网格容器和网格项来实现复杂的布局效果。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值