position中absolute和fixed的区别

最新推荐文章于 2024-03-09 16:15:33 发布
最新推荐文章于 2024-03-09 16:15:33 发布
阅读量4.2k 收藏 8
点赞数 3
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/peng_da818/article/details/80639418
版权
本文详细解释了CSS中fixed和absolute两种定位方式的区别。在没有滚动条的情况下两者表现相同；但在有滚动条的情况下，fixed定位元素位置固定不变，而absolute定位元素会随滚动条移动。fixed定位通常应用于网站边缘显示公司联系信息或快速返回顶部按钮，而absolute定位适用于页面内部元素布局。

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

fixed:固定定位

absolute:绝对定位


区别很简单：

1、没有滚动条的情况下没有差异

2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动


常用场合：

1.fixed常用于网站边缘的公司联系方式和快速回到顶部

2.absolute常用于页面

peng_da818
关注
position:fixed或absolute时百分比参考屏幕宽度
09-25
当使用position:fixed或position:absolute的时候，元素的定位将会脱离常规文档流，而此时如何设置元素的宽度和位置就变得稍微有点不同。通常情况下，元素的宽度和位置是相对于其父元素进行定位的。但是当元素的定位...
position为absolute与fixed区别
sinat_41747081的博客
03-10 3311
版权声明：本文为博主原创文章，未经博主允许不得转载。 position为absolute与fixed两者的共同点是：元素都脱离了标准流，均不再占据空间； 不同点是： 定义为absolute的元素会随着滚动条的拖动而变化，定义为fixed的元素并不会随着滚动条的拖动而变化。 如下面的代码所示： 运行结果为： 当拖动滚动条时，定义为absolute的元素随着滚动条的拖动而发生变化，...
使用position的fixed和absolute二者区别
xiaoxinshuaiga的博客
10-22 2026
我们知道，css的position定位属性中，表示绝对定位的有两个值，值absolute与值fixed。 都是绝对定位，二者有一致性，也有不同点。那么二者的区别是什么呢？那就是position的fixed值定位的元素会固定在原来的位置不变，不管你如何拖动滚动条，元素都不会改变位置，这从fixed这个英文单词的意思也可以看出，“固定的，不变的，固执的”。而absolute正好相反，拖动滚动条时元素...
position的absolute与fixed共同点与不同点
qq_36631168的博客
11-09 2076
A：共同点： 1.改变行内元素的呈现方式，display被置为block； 2.让元素脱离普通流，不占据空间； 3.默认会覆盖到非定位元素上 B:不同点： absolute的”根元素“是可以设置的， 而fixed的”根元素“固定为浏览器窗口。当滚动网页时，fixed元素与浏览器窗口之间的距离是不变的。
【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
weixin_30294709的博客
06-01 181
什么是层模型？ 什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。 如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确...
详解flex布局与position:absolute/fixed的冲突问题
01-19
之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下： 项目实战： 我们现在想做一个头部的导航栏，又想用fixed把它固定在上方...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
在这种方法中，需要将 header 和 footer 设置为 position:fixed，并设置中间滑动部分的 padding-top 和 padding-bottom，以便在上下方向超出一屏的部分变成滚动模式并不溢出。 第二种解决方案是使用 transform: ...
css中position:fixed实现div居中上下左右居中
09-25
总结来说，使用CSS的position:fixed和相对应的margin调整，可以实现DIV在浏览器窗口中的完全居中。这种方法简单实用，但需要对CSS属性有深入的理解和灵活运用。通过实践和调整，可以发现更多类似的布局技巧，丰富...
position: absolute;_position中的fixed、relative、absolute
weixin_39525617的博客
11-27 198
position:fixed——指不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非none时，容器由视口改为该祖先。position​developer.mozilla.org当没有设置position:fix...
认识position：fixed/absolute/relative
HZ___ZH的博客
12-18 519
1.position: relative 相对定位，不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。 2.position:static 正常流（默认值），不能通过z-index进行层次分级。(设置left等无效) 3.position:absolute 绝对定位，脱离文档流的布局，子元素脱离文档流，可导致父元素无法被撑开，遗留下来的空间由后面的元素填充。通过 top,bottom,left,right 定位，定位的起始
CSS 元素的绝对定位 position: absolute 和 position: fixed
歪脖先生的博客
02-21 2271
绝对定位当一个元素的 position属性设置为 absolute 或 fixed，它将使用绝对定位。绝对定位的元素将从文档流中完全删除，它原先在正常文档流中所占的空间会关闭，就好像该元素不存在一样，因此不会在原先的位置留下空白。CSS 绝对定位的元素相对它的包含块进行定位。position: absolute 元素的包含块是最近已定位（position属性被设置，且不是static）的祖先元素，...
相对定位(relative)，绝对定位(absolute)，固定定位(fixed)
热门推荐
weixin_44446758的博客
05-08 1万+
一、绝对定位 position：absolute 绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（html）。 绝对定位本身与文档流无关，因此不占空间，元素会脱离文档流，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，并且可以通过z-index属性来...
css：position / static默认属性 / fixed固定定位 / relative相对定位 / absolute绝对定位 / sticky粘性定位
最新发布
snow的博客
03-09 1968
这意味着它将按照在HTML代码中出现的顺序进行显示，并且不会受到其他定位属性（如top、right、bottom或left）的影响。绝对定位，元素的位置相对于其最近的已经定位的父元素，如果最近的父元素没有定位则相对于文档进行定位。2、可以使用top、right、bottom和left属性来定义相对于元素原始位置的偏移量。3、当使用相对定位时，元素不会对其他相对定位或绝对定位的元素产生影响。的元素是文档流的一部分，忽略其他定位属性，如top、right、bottom或left。
position定位
上帝掉眼泪
03-24 648
position的定位方式
将position设置为absolute/fixed元素的特点
wushen的博客
04-08 512
 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度。 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度。◼ 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性。◼ 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性。◼ 3.绝对定位元素 -> width: 包裹内容。
细谈position属性:static、fixed、relative与absolute
ggboy6555的博客
07-24 2274
更新时间：2019-07-24 09:21:38 　　学习WEB有些时日了，对DOM中的定位概念有些模糊，特地花了一个下午的时间搜资料、整理写下这篇随笔。 　　首先，我们要清楚一个概念：文档流。 　　简单的讲，就是窗体自上而下分成一行一行，并在每行中按照从左到右来布局。 　　而脱离文档流，就是说，将元素从普通的布局排版中拿走。其他盒子在定位的时候，无视这个元素的存在而进行定位。 ...
position的absolute与fixed
06-28
### 回答1： position的absolute和fixed都是CSS中的定位属性。 absolute表示绝对定位，元素的位置相对于最近的已定位的祖先元素（即position属性值为relative、absolute或fixed的元素）来确定。如果没有已定位的祖先元素，则相对于最初的包含块（即文档的根元素）来确定位置。 fixed表示固定定位，元素的位置相对于浏览器窗口来确定，不会随着页面滚动而改变位置。通常用于创建固定的导航栏或悬浮广告等效果。 总的来说，absolute和fixed都可以用来控制元素的位置，但是相对定位的元素位置会随着页面滚动而改变，而固定定位的元素位置不会改变。 ### 回答2： CSS中，position的absolute和fixed可以用来指定元素的定位方式。这两种定位方式都是相对于其父元素或浏览器窗口进行定位的。 absolute定位方式的元素会脱离文档流，相对于其最近的定位祖先进行定位。如果没有定位祖先，它会相对于文档的初始包含块进行定位。可以通过top、bottom、left和right属性来控制元素的位置。absolute定位的元素不占用文档流的位置，所以它后面的元素会往前移。 fixed定位方式的元素会相对于浏览器窗口进行定位，而不是相对于其父元素。它不会随页面的滚动而移动，所以它可以用于创建固定的工具栏或导航栏。可以像absolute定位一样使用top、bottom、left和right属性来控制元素的位置。 在使用absolute和fixed定位时，需要注意的是，如果父元素使用了overflow:hidden属性，子元素使用了absolute或fixed定位后可能会被裁剪，这时可以将父元素的position属性设置为relative来解决问题。 总之，absolute和fixed定位都可以用来控制元素的位置，但是它们的定位方式不同，应该根据具体情况选择使用哪种方式。 ### 回答3： position的absolute与fixed是CSS中用于定位元素的属性。它们都可以让元素脱离文档流，并根据父级元素或文档窗口进行定位。 首先，position的absolute属性，它是根据父级元素进行定位的。当设置了absolute属性后，元素会脱离文档流，并相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于文档的左上角进行定位。这里的“已定位祖先元素”是指position属性值为relative、absolute或fixed的父级元素。 与此相反，position的fixed属性是根据浏览器窗口进行定位的。当设置了fixed属性后，元素会脱离文档流，并相对于浏览器窗口进行定位。这意味着无论用户如何滚动页面，该元素位置都不会改变。fixed属性经常用于创建浮动元素，例如固定在浏览器窗口底部的导航栏。 需要注意的是，fixed属性在移动设备上可能会存在问题，因为它会在滚动过程中一直停留在同一个位置，会影响用户体验。此外，position属性的值还有relative和static。其中，relative属性是根据元素自身进行定位，可以通过top、bottom、left和right属性来调整位置。static属性是默认值，元素按照文档流排列，并在没有设置其他属性时不会被定位。 总的来说，position的absolute和fixed属性都是用于定位元素的，但是它们的定位方式是不同的。使用这些属性可以让页面中的元素按照设计师的意愿进行精确地布局，从而提高网页的可读性和可用性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值