CSS定位static, relative, absolute, fixed, sticky

最新推荐文章于 2025-05-05 15:26:51 发布
最新推荐文章于 2025-05-05 15:26:51 发布
阅读量806 收藏 2
点赞数
分类专栏： CSS 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SongD1114/article/details/124800669
版权
本文介绍了CSS中的五种定位模式：静态定位、相对定位、绝对定位、固定定位和粘性定位，以及如何利用它们实现自由布局。重点讲解了定位的层叠概念和z-index的使用，同时提到了transform属性在调整元素位置中的应用。通过示例代码和动画解释，帮助读者深入理解CSS定位布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

定位（position）最大的特点是有“层叠”的概念， 可以让多个盒子堆叠显示。

动画解释CSS定位布局-Static, Relative, Absolute, Fixed, Sticky, 五大定位模式实现自由布局_哔哩哔哩_bilibili我们在设计页面的时候，上边的元素并不是整齐的，从上到下，从左到右排列的，而是有各中各样的布局方式，比如错位的，层叠的，固定在某个地方的，要实现这些复杂的布局，需要熟练掌握 CSS 定位的概念和用法。示例代码：https://codepen.io/collection/ABGxjz个人博客：https://www.zxuqian.cnQQ交流群：1004912565https://www.bilibili.com/video/BV1ni4y1g7tc?spm_id_from=333.337.search-card.all.click

最低0.47元/天 解锁文章
CSS 固定导航栏（fixed）和粘性导航栏（sticky）
CyberPlayer的博客
02-22 1967
垂直式 水平式 注意：固定定位在移动设备上可能无法正常工作。 粘性式 注意：Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见上面的例子）。 必须指定top、right、bottom或left至少之一，以使粘性定位起作用。 ...
CSS之定位：边偏移 静态定位static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性定位sticky，子绝父相的由来,绝对定位的盒子居中, 堆叠顺序
qq_44156869的博客
02-18 1911
为什么需要定位？ 某一个盒子可以自由的在一个盒子内移动位置，并且压住其他盒子。 当我们滚动窗口的时候，盒子的是固定屏幕的某个位置的。 为什么需要定位 以上效果，标准流或者浮动都无法实现，此时需要定位来实现。 所以： 浮动可以让多个盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 定位组成： 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位 = 定位模式 +边偏移。 定位模式
CSS position定位（fixed、sticky）
大圣归来圣骑士清欢的博客
12-27 1098
CSS position定位（fixed、sticky）
深入理解CSS定位：一文搞懂Static、Relative、Absolute、Fixed、Sticky的应用与区别
m0_46335150的博客
04-16 998
CSS定位是网页布局的核心技术之一，掌握各种定位方式对于前端开发者至关重要。本文将详细介绍CSS中的五种主要定位方式：静态定位、相对定位、绝对定位、固定定位和粘性定位，并通过实例展示它们的应用场景和差异。
CSS定位（static、relative、absolute、fixed）
leeb2011的博客
03-21 148
1.static定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrapper{ width: 600px; height: 600px; backgr
css基础-四大定位（static、relative、absolute、fixed）
FYD的博客
04-21 610
一、静态static定位：文档里正常盒子的定位。静态定位的元素不会受到 top, bottom, left, right 和z-index影响。二、相对定位relative：盒子现在位置距离盒子原来位置有一段偏移的距离。相对定位方式，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会...
CSS - 定位
小蚂蚁的世界
06-19 1478
基本概念利用定位，可以准确的定义元素框相对于其正常位置，相对于父元素或者相对于浏览器的相对位置。position：static | relative | absolute | fixed static：对象遵循常规流。此时4个定位偏移属性不会被应用。relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流...
深入解析CSS定位技术：static、relative、fixed、absolute与sticky应用
例如，通过使用absolute或relative定位可以创建悬浮效果、弹出菜单、模态窗口等组件，而fixed和sticky定位则适用于实现导航栏、页脚、侧边栏等元素的固定显示。对于重叠现象的处理则需要开发者细心地规划z-index的值...
CSS之定位布局 -- position：relative/absolute/fixed/sticky
qq_48802092的博客
07-27 515
特点默认文档流定位---positionstatic;
【高频考点精讲】CSS定位全解析：static、relative、absolute、fixed、sticky的区别和应用场景
最新发布
全栈老李的博客
05-05 951
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS定位这个看似简单实则暗藏玄机的话题。我是全栈老李，一个在代码海洋里摸爬滚打多年的老司机。定位(position)这个属性，表面上看就几个值，但用起来却能让不少新手掉坑里。不信？咱们慢慢聊。
CSS定位的四种类型：static | relative | absolute | fixed
xx_yan的博客
03-31 768
CSS定位文档流定位的四种类型static 静态定位relative 相对定位absolute 绝对定位abdolute不生效对齐优先级fixed 固定定位 文档流 文档流也被称为normal flow普通流，是元素在html中的排列方式。 block元素单独占一行垂直排列，inline元素在行内从左至右依次排列。 定位的四种类型 static 静态定位 静态定位是默认的定位方式。它遵循正常的文档...
CSS中position属性( absolute | relative | static | fixed )详解
帅的博客
04-07 1965
我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用to
css定位: fixed和sticky
Motion_zq的博客
09-23 508
css定位: fiexd和sticky bfc
html5静态定位,CSS Static 静态定位示例
weixin_39849054的博客
06-10 3021
CSS Static 静态定位示例.box{color: #fff;background: #7dc765;padding: 20px;}.container{padding: 50px;margin: 50px;position: relative;border: 5px solid black;font-family: Arial, sans-serif;}.container p{line-...
CSS定位 static、relative、absolute、fixed、sticky
风云长轩的博客
07-14 1606
分为五种：static、relative、absolute、fixed、sticky。
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky、inset）
朝阳39的博客
07-07 1571
依据最近一层的定位元素（position 值为 absolute/relative/fixed 的元素）定位，若无定位元素，则依据 body 定位。必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。黏性定位元素的父元素高度不能和黏性定位元素的高度相同（否则没有实现黏性效果的空间）父元素相对定位，子元素绝对定位，常用于实现子元素重叠在父元素上。
CSS五种定位方式详解: static、relative、absolute、fixed、sticky
大剑师兰特的GIS世界
04-14 1479
- `static` 不支持任何偏移属性，元素直接按照HTML的顺序和布局规则排列。 - `relative` 支持偏移，但不脱离文档流，其他元素感知不到其偏移后的位置。 - `absolute` 脱离文档流，可以自由移动至任意位置，受最近非 `static` 定位祖先约束。 - `fixed` 脱离文档流且不受滚动影响，始终在视口的某个位置固定显示。 - `sticky` 兼具文档流内的自然流动和滚动后的固定定位，在满足条件时行为类似于`fixed`定位。
css：position / static默认属性 / fixed固定定位 / relative相对定位 / absolute绝对定位 / sticky粘性定位
snow的博客
03-09 2025
这意味着它将按照在HTML代码中出现的顺序进行显示，并且不会受到其他定位属性（如top、right、bottom或left）的影响。绝对定位，元素的位置相对于其最近的已经定位的父元素，如果最近的父元素没有定位则相对于文档进行定位。2、可以使用top、right、bottom和left属性来定义相对于元素原始位置的偏移量。3、当使用相对定位时，元素不会对其他相对定位或绝对定位的元素产生影响。的元素是文档流的一部分，忽略其他定位属性，如top、right、bottom或left。
CSS 定位（静态、固定、相对、绝对、粘性）
Ares5k
04-08 841
静态定位、固定定位、相对定位、绝对定位、粘性定位
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值