position中absolute和fixed的区别

最新推荐文章于 2024-09-24 15:04:24 发布
原创 最新推荐文章于 2024-09-24 15:04:24 发布 · 4.3k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文详细解释了CSS中fixed和absolute两种定位方式的区别。在没有滚动条的情况下两者表现相同；但在有滚动条的情况下，fixed定位元素位置固定不变，而absolute定位元素会随滚动条移动。fixed定位通常应用于网站边缘显示公司联系信息或快速返回顶部按钮，而absolute定位适用于页面内部元素布局。

fixed:固定定位

absolute:绝对定位


区别很简单：

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

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


常用场合：

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

2.absolute常用于页面

peng_da818
关注
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
waterlin2011的博客
06-10 1468
通过合理运用 position 属性及其值，你可以构建出既美观又实用的页面布局。关键是理解每种定位方式的特性，并根据实际需求灵活组合使用。
position:fixed 固定定位
热门推荐
asdfgv2022的博客
08-03 5万+
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...
CSS属性详解——position:fixed
Wod_7的博客
06-04 1万+
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
CSS定位布局详解
大河之犬的博客
10-03 8385
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
position为absolute与fixed区别
sinat_41747081的博客
03-10 3473
版权声明：本文为博主原创文章，未经博主允许不得转载。 position为absolute与fixed两者的共同点是：元素都脱离了标准流，均不再占据空间； 不同点是： 定义为absolute的元素会随着滚动条的拖动而变化，定义为fixed的元素并不会随着滚动条的拖动而变化。 如下面的代码所示： 运行结果为： 当拖动滚动条时，定义为absolute的元素随着滚动条的拖动而发生变化，...
详解flex布局与position:absolute/fixed的冲突问题
01-19
之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下： 项目实战： 我们现在想做一个头部的导航栏，又想用fixed把它固定在上方...
css中position:fixed实现div居中上下左右居中
09-25
总结来说，使用CSS的position:fixed和相对应的margin调整，可以实现DIV在浏览器窗口中的完全居中。这种方法简单实用，但需要对CSS属性有深入的理解和灵活运用。通过实践和调整，可以发现更多类似的布局技巧，丰富...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
在这种方法中，需要将 header 和 footer 设置为 position:fixed，并设置中间滑动部分的 padding-top 和 padding-bottom，以便在上下方向超出一屏的部分变成滚动模式并不溢出。 第二种解决方案是使用 transform: ...
position:fixed或absolute时百分比参考屏幕宽度
09-25
当使用position:fixed或position:absolute的时候，元素的定位将会脱离常规文档流，而此时如何设置元素的宽度和位置就变得稍微有点不同。通常情况下，元素的宽度和位置是相对于其父元素进行定位的。但是当元素的定位...
使用position的fixed和absolute二者区别
xiaoxinshuaiga的博客
10-22 2062
我们知道，css的position定位属性中，表示绝对定位的有两个值，值absolute与值fixed。 都是绝对定位，二者有一致性，也有不同点。那么二者的区别是什么呢？那就是position的fixed值定位的元素会固定在原来的位置不变，不管你如何拖动滚动条，元素都不会改变位置，这从fixed这个英文单词的意思也可以看出，“固定的，不变的，固执的”。而absolute正好相反，拖动滚动条时元素...
position的absolute与fixed共同点与不同点
qq_36631168的博客
11-09 2105
A：共同点： 1.改变行内元素的呈现方式，display被置为block； 2.让元素脱离普通流，不占据空间； 3.默认会覆盖到非定位元素上 B:不同点： absolute的”根元素“是可以设置的， 而fixed的”根元素“固定为浏览器窗口。当滚动网页时，fixed元素与浏览器窗口之间的距离是不变的。
【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
weixin_30294709的博客
06-01 211
什么是层模型？ 什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。 如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确...
position: absolute;_position中的fixed、relative、absolute
weixin_39525617的博客
11-27 217
position:fixed——指不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非none时，容器由视口改为该祖先。position​developer.mozilla.org当没有设置position:fix...
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 1万+
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
认识position：fixed/absolute/relative
HZ___ZH的博客
12-18 578
1.position: relative 相对定位，不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。 2.position:static 正常流（默认值），不能通过z-index进行层次分级。(设置left等无效) 3.position:absolute 绝对定位，脱离文档流的布局，子元素脱离文档流，可导致父元素无法被撑开，遗留下来的空间由后面的元素填充。通过 top,bottom,left,right 定位，定位的起始
css中的定位之fixed和absolute的区别
最新发布
DOVISK的博客
09-24 1224
absolute：相对于最近的定位祖先元素定位，随着页面滚动。fixed：相对于浏览器视口定位，页面滚动时位置不变。选择使用absolute还是fixed，取决于你希望元素的位置是相对于哪个上下文，以及它是否需要在页面滚动时保持静止。
CSS 元素的绝对定位 position: absolute 和 position: fixed
歪脖先生的博客
02-21 2431
绝对定位当一个元素的 position属性设置为 absolute 或 fixed，它将使用绝对定位。绝对定位的元素将从文档流中完全删除，它原先在正常文档流中所占的空间会关闭，就好像该元素不存在一样，因此不会在原先的位置留下空白。CSS 绝对定位的元素相对它的包含块进行定位。position: absolute 元素的包含块是最近已定位（position属性被设置，且不是static）的祖先元素，...
相对定位(relative)，绝对定位(absolute)，固定定位(fixed)
weixin_44446758的博客
05-08 1万+
一、绝对定位 position：absolute 绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（html）。 绝对定位本身与文档流无关，因此不占空间，元素会脱离文档流，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，并且可以通过z-index属性来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值