fixed和absolute

最新推荐文章于 2025-05-12 19:39:12 发布
最新推荐文章于 2025-05-12 19:39:12 发布
阅读量222 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lxcflyingfish/article/details/82349874
本文详细解释了CSS中fixed和absolute两种定位方式的区别。当页面不存在滚动条时，两者表现一致；存在滚动条时，fixed定位元素保持不动，而absolute定位元素会随滚动条移动。

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

fixed和absolute在没有滚动条的时候无差异；在有滚动条的时候，fixed不会随滚动条的移动而移动，而absolute则会随之移动。

定位：relative相对定位、absolute绝对定位、fixed固定定位
m0_64460142的博客
04-08 4815
作者有话说:在学定位之前有了解过吗？再没学浮动之前，这些块元素标签会出现在一列，要想实现并排就可以使用浮动float，现在我们可以学习定位，给背景图片或者图片、div、border等添加属性等，有定位在祖先级的、定位在浏览器的，比如说浏览京东页面时，当你拉动网页的时候页面会动，但是会有一个栏目始终保持在那个位置不动，这就是使用的定位，接下来一起看看吧！ 定位使用position static 默认值，没有定位 relative 相对定位 ...
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
热门推荐
qq_44939011的博客
07-20 1万+
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
Static、Relative、Absolute、Fixed、Sticky的应用与区别
teeeeeeemo的博客
05-12 874
定位方式脱离文档流？定位基准常见场景是否支持 z-index？static否无默认布局否relative否自身原始位置微调位置、作为定位容器是absolute是最近的定位祖先或视口弹出层、浮动元素是fixed是视口固定导航栏、悬浮按钮是sticky否（阈值前）最近的滚动祖先或视口吸顶效果、动态固定元素是。
absolute和fixed的区别
guolulu66的博客
10-13 735
fixed:固定定位 absolute:绝对定位 区别很简单： 1、没有滚动条的情况下没有差异 2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动 常用场合： 1.fixed固定定位，只针对浏览器窗口定位，上下左右，不会随着窗口大小改变，固定不变，例如固定位置的小广告，常用于网站边缘的公司联系方式和快速回到顶部 2.absolute绝对定位，脱离文档流，没有父元素，上下左右设置是针对于浏览器窗口，不占据位置，会随着窗口大小与页面一起改变 ...
fixed和absolute的区别
weixin_34233856的博客
08-08 423
今天在实际项目中，写首页一屏的时候，发现页脚定位（position：absolute；）没有达到我想要的效果（不管屏幕大小，页脚始终相对浏览器底部定位）。于是我觉得有点奇怪，然而我旁边的小哥说：很明显你应该用（position：fixed；），于是连忙整理一下他俩的区别。 1、fixed--固定定位，参照位置是浏览器窗口的左上角。 　　2、absolute--绝对定...
position:absolute :fixed区别
wym1581的专栏
02-11 587
absolute：当浏览器大小改变时，悬浮层随着浏览器上下移动 fixed：当浏览器大小改变时，悬浮层只会悬浮在浏览器的正上方
css 定位 fixed和absolute 层级
最新发布
05-28
- 如果`fixed`和`absolute`定位的元素都设置了`z-index`，且`fixed`的`z-index`值大于`absolute`的`z-index`值，则`fixed`元素会覆盖`absolute`元素；反之亦然[^5]。 #### 使用方法 ##### Fixed 定位 - `fixed`定位...
css中postion的fixed与absolute区别详解
09-25
position 属性有几种不同的值，包括 static、relative、absolute 和 fixed。本文将详细探讨 fixed 和 absolute 定位之间的区别。 首先，我们来看看 fixed 定位。当position属性设置为fixed时，元素会相对于浏览器...
12_元素定位-position设置为fixed-absolute特点二.html
10-09
在CSS中，元素的定位...fixed和absolute定位是CSS中两个强大的工具，它们各自具有不同的特点和使用场景。开发者在进行网页布局设计时，可以根据具体需求灵活运用这两种定位方式，以实现丰富的视觉和功能效果。
11_元素定位-position设置为fixed-absolute特点一.html
10-09
fixed和absolute是CSS中极为重要的两个定位属性，它们各有特点与用途。熟练掌握并灵活运用这两个定位属性，对于实现复杂且高质量的网页布局至关重要。无论是在创建静态页面还是动态交互中，都能为设计师和前端开发...
CSS中 absolute 与 fixed 的异同（示例代码）
大剑师兰特的GIS世界
04-12 976
`position: absolute` 的元素会相对于最近的已定位（非 `static` 定位）祖先元素进行定位。如果这样的祖先元素不存在，则相对于初始包含块（通常是 `` 元素）定位。 - `position: fixed` 的元素则是相对于浏览器视口（viewport）进行定位，无论页面怎么滚动，它的位置始终不变。
【CSS 面经】absolute 与 fixed 共同点与不同点
lph159的博客
12-07 698
这意味着这些元素不再影响其他元素的布局，它们不会占据常规空间，周围的元素会重新调整位置，填补它们原本占据的空间。定位常用于页面中需要始终显示的元素，如固定的导航栏、固定的回到顶部按钮等。定位的元素会相对于浏览器窗口进行定位，无论页面怎么滚动，元素都始终停留在页面的顶部和左侧。这两种定位方式都有一个共同的特点，它们的定位是相对于某个“参照元素”进行的。定位的元素会随着页面的滚动而移动，因此它的定位是相对静态的。定位的元素会根据其最近的定位祖先元素来决定位置，而。定位的元素会按照父元素的顶部和左边进行定位。
absolute和fixed定位的区别
null
06-26 7133
两种定位的共同点：都会脱离当前文档流，触发BFC区别：相对定位的元素不同：absolute是相对于离它最近的有定位的父元素进行定位（如果没有定位的父元素则相对于浏览器窗口）；fixed是相对于浏览器窗口定位在有滚动条的页面中，absolute会跟随页面滑动，fixed不会滑动，始终固定在同一位置...
absolute和fixed的区别 css
weixin_43795761的博客
05-09 195
区别： 在有滚动条的情况下，fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动。 fixed:经常用作 弹框，顶部导航栏，一键回到顶部的小按钮。 参考：https://blog.csdn.net/peng_da818/article/details/80639418?spm=1001.2014.3001.5506 ...
css简易的进度条
qq_45723045的博客
10-22 904
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
relative、fixed、absolute 和 static 四种定位有什么区别？
alive_new的博客
03-21 523
absolute（绝对定位）：绝对定位使元素脱离文档流，并相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。fixed（固定定位）：固定定位使元素相对于视口（浏览器窗口）进行定位，即使页面滚动也不会改变其位置。固定定位的元素不会占据文档流中的空间，其他元素会忽略它的位置。relative（相对定位）：相对定位相对于元素在文档流中的初始位置进行定位。相对定位不会使元素脱离文档流，其他元素仍然以相对定位元素的原始位置进行布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值