static,relative,absolute,fixed，sticky四种定位方式的区别

最新推荐文章于 2024-04-14 00:45:00 发布
最新推荐文章于 2024-04-14 00:45:00 发布
阅读量1.3k 收藏 4
点赞数 3
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43814020/article/details/106432468
版权

1.static静态定位

在这里插入图片描述

2.relative相对定位

在这里插入图片描述

3.absolute绝对定位

在这里插入图片描述

4.fixed固定定位

在这里插入图片描述

5.sticky粘性定位

在这里插入图片描述

6.定位组成

在这里插入图片描述

7.边偏移

在这里插入图片描述

8.定位总结

在这里插入图片描述

小阿兜
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
static、relative、absolute、fixed四种定位的区别
qac的博客
12-17 1021
文章目录1.静态定位2.相对定位3.绝对定位4.固定定位 1.静态定位 静态定位（position：static）是HTML中的默认定位，符合常规文档流，这里没太多内容。 2.相对定位 相对定位（position：relative），对象相对于本身位置而言，进行上下左右的偏移，但注意，它不脱离文档流！ 如上图所示，红色div设置了相对定位，上左偏移位置（top：20px；left：20px；），但蓝色div仍然按照常规文档流保持原位置，说明红色div虽然位置偏移，但相对于本身的原位置仍然占领着。 3.绝对
CSS定位static, relative, absolute, fixed, sticky
SongD1114的博客
05-16 706
CSS定位static, relative, absolute, fixed, sticky
css定位区别（relative,absolute，static,fixed）
向日葵
06-30 723
css之定位relative,absolute，static,fixed
css中四大定位模式
qq_51644702的博客
04-19 6403
目录 一、静态定位：static 二、相对定位：relative 三、绝对定位：absolute 四、固定定位：fixed 五、定位要点——子绝父相 在CSS中，通过position属性定义元素的定位模式，语法如下： 选择器 { position:属性值; } 一、静态定位：static 静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。 特点：按照标准流特性摆放位置，它没有边偏移,在布局时我们几乎不用。 二、相对定位：relati.
Css.position（static,sticky,fixed,relative,absolute）
记录 分享 成就
05-13 209
如果html中的元素想跳出html排版，就需要用position属性 position取值：static,sticky,fixed,relative,absolute 结合使用的属性：top，left，bottom，right 取回 1px 简单区分 static ：默认，就是普通的标签 sticky：有滚动条的时候，会粘到顶部或者底部 fixed：固定位置，滚动条怎么搞也没用 relative：在修饰标签的位置为参考系，使用top，left控制 absolute：按照屏幕作为参考系
CSS之position定位
qq_33554950的博客
02-27 242
CSS之position定位position属性值position:sticky粘性定位的计算规则层次滚动效果实现 position属性值 absolute：绝对定位，相对于static定位以外的第一个父元素进行定位 fixed：绝对定位，相对于浏览器窗口 relative：相对定位，相对于正常位置 static：默认值 inherit：从父元素继承 sticky：当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed （注：top或left必须要有明确的计算值，否则fixed的
position:relative/absolute无法冲破的等级
10-31
CSS提供了多种定位方式，包括`static`、`relative`、`absolute`、`fixed`和`sticky`。本文将深入探讨`relative`与`absolute`定位方式在特定情况下的局限性及其解决方案。 #### 关键概念解释 - **position:relative*...
详解CSS粘性定位 sticky
12-11
首先，让我们回顾一下CSS中的其他定位方式： 1. `static`：这是元素的默认定位，元素遵循正常的文档流。 2. `relative`：相对定位，元素相对于其正常位置定位，不脱离文档流，可以通过`top`, `bottom`, `left`, `...
CSS position属性absolute relative等五个值的解释
12-13
position属性有五个基本值：static、relative、absolute、fixed以及sticky，每个值都有其独特的应用场景。 1. **static**（静态定位） 静态定位是元素的默认定位方式。元素按照正常的文档流顺序排列，不考虑top、...
详解CSS中position属性介绍(新增sticky)
01-19
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值，元素处于正常...
css之定位---static、absolute 、relative、 fixed、sticky
qq_51985469的博客
07-28 98
static ：遵循基本的定位规定，不能通过进行层次分级。absolute “脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。relative ：不脱离文档流，参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。
CSS五种定位方式详解: static、relative、absolute、fixed、sticky
最新发布
大剑师兰特的GIS世界
04-14 1154
- `static` 不支持任何偏移属性，元素直接按照HTML的顺序和布局规则排列。 - `relative` 支持偏移，但不脱离文档流，其他元素感知不到其偏移后的位置。 - `absolute` 脱离文档流，可以自由移动至任意位置，受最近非 `static` 定位祖先约束。 - `fixed` 脱离文档流且不受滚动影响，始终在视口的某个位置固定显示。 - `sticky` 兼具文档流内的自然流动和滚动后的固定定位，在满足条件时行为类似于`fixed`定位。
CSS定位 static、relative、absolute、fixed、sticky
风云长轩的博客
07-14 1503
分为五种：static、relative、absolute、fixed、sticky。
html/css定位position的五种方式：static,relative相对定位,fixed,absolute绝对定位,sticky粘性定位
qq_34729246的博客
10-22 801
1、absolute(绝对定位)，其位置相对于最近已定位的父元素，如果元素没有已定位的父元素那么它的位置相对于 2、static(默认的静态定位)，即没有定位，遵循正常的文档流对象，静态定位的元素不受top、left、right、bottom影响。 3、relative(相对定位)，其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。 4、fixed，元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。 5、sticky(粘性定位)，基于用户滚动位置...
粘性布局sticky下的fixed显示被遮挡问题
快乐分享
08-05 1431
避坑！粘性布局sticky下的fixed显示被遮挡
CSS五种定位(相对定位、绝对定位、固定定位、static定位、sticky 定位)模式学习笔记
做技术，坚持才是最重要的，一时的热情只是暂时的进步
09-29 1602
一、static定位 没有定位，遵循正常的文档流对象，不会受到 top, bottom, left, right影响。 .static { position: static;/*默认*/ width: 100px; height: 100px; border: 3px solid #73AD21; } 二、相对定位 相对该元素原本文档流的位置进行定位，且原本的位置保留。 <!DOCTYPE html> <html> <hea
CSS中position属性介绍(新增sticky)
08-22 4164
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。1、position: static　　static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: re
CSSposition定位（relative、absolute、fixed、sticky）
qq_39406353的博客
02-28 713
这一周，我在逆战班学习了很多，具体介绍一下position相对定位和绝对定位，希望可以帮助到你。 **position定位 ** position 的五个属性：static（默认）、relative、absolute、fixed、sticky。 默认的是 ：static 相对定位：relative 绝对定位：absolute 固定定位：fixed 粘性定位：st...
sticky定位
热门推荐
好记性不如烂笔头~
02-12 1万+
我们都知道常见的定位方式有static、relative、absolute、fixed，今天来介绍一种‘粘性定位’sticky。 定义 粘性定位可以被认为是相对定位（relative）和固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 也就是说sticky会让元素在页面滚动时如同在正常流中（relative定位效果），但当滚动到特定位置时就会固定在屏幕上如同 fixe...
static | relative | absolute | sticky | fixed
11-10
这里是CSS中五种常见的定位方式的介绍和用法： 1. static（静态定位）：元素的位置遵循正常的文档流，不受top、bottom、left、right影响。 2. relative（相对定位）：元素的位置相对于它在文档流中的初始位置进行定位，可以通过top、bottom、left、right属性进行微调。 3. absolute（绝对定位）：元素的位置相对于最近的已定位祖先元素（position属性不为static）进行定位，如果没有已定位的祖先元素，则相对于文档的body元素进行定位。 4. fixed（固定定位）：元素的位置相对于浏览器窗口进行定位，不随页面滚动而改变。 5. sticky（粘性定位）：元素在跨越特定阈值前为相对定位，之后为固定定位。可以通过top、bottom、left、right属性进行微调。 下面是一个例子，展示了这五种定位方式的用法： ```html <!DOCTYPE html> <html> <head> <title>定位方式示例</title> <style type="text/css"> .container { height: 300px; position: relative; border: 1px solid black; } .box { width: 100px; height: 100px; background-color: red; color: white; text-align: center; line-height: 100px; font-size: 20px; } .static { position: static; } .relative { position: relative; top: 50px; left: 50px; } .absolute { position: absolute; top: 50px; left: 50px; } .fixed { position: fixed; top: 50px; left: 50px; } .sticky { position: sticky; top: 50px; } </style> </head> <body> <div class="container"> <div class="box static">static</div> <div class="box relative">relative</div> <div class="box absolute">absolute</div> <div class="box fixed">fixed</div> <div class="box sticky">sticky</div> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值