分析css中position属性值fixed与absolute的区别

最新推荐文章于 2024-04-12 00:00:00 发布
最新推荐文章于 2024-04-12 00:00:00 发布
阅读量1.9k 收藏 3
点赞数
分类专栏： html5、css知识学习

position属性是对于元素位置设置的属性，一般来说fixed是相对于window窗口的不会随着页面的滚动而位置发生变化

absolute是相对于页面中的元素位置设置的，所以位置会随着页面的滚动而发生变化，不会固定不变。如果页面没有滚动条的时候，两者的效果是一样的。

详细的讲解：链接点击打开链接

GIS晴天
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用position的fixed和absolute二者区别
xiaoxinshuaiga的博客
10-22 1964
我们知道，css的position定位属性中，表示绝对定位的有两个值，值absolute与值fixed。 都是绝对定位，二者有一致性，也有不同点。那么二者的区别是什么呢？那就是position的fixed值定位的元素会固定在原来的位置不变，不管你如何拖动滚动条，元素都不会改变位置，这从fixed这个英文单词的意思也可以看出，“固定的，不变的，固执的”。而absolute正好相反，拖动滚动条时元素...
CSS中fixed和absolute区别
好吗好的~的技术博客
09-26 4752
fixed:固定定位 absolute:绝对定位 区别： 1、没有滚动条的情况下没有差异 2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动  ...
CSS中 absolute 与 fixed 的异同（示例代码）
最新发布
大剑师兰特的GIS世界
04-12 807
`position: absolute` 的元素会相对于最近的已定位（非 `static` 定位）祖先元素进行定位。如果这样的祖先元素不存在，则相对于初始包含块（通常是 `` 元素）定位。 - `position: fixed` 的元素则是相对于浏览器视口（viewport）进行定位，无论页面怎么滚动，它的位置始终不变。
CSS 元素的绝对定位 position: absolute 和 position: fixed
歪脖先生的博客
02-21 2105
绝对定位当一个元素的 position属性设置为 absolute 或 fixed，它将使用绝对定位。绝对定位的元素将从文档流中完全删除，它原先在正常文档流中所占的空间会关闭，就好像该元素不存在一样，因此不会在原先的位置留下空白。CSS 绝对定位的元素相对它的包含块进行定位。position: absolute 元素的包含块是最近已定位（position属性被设置，且不是static）的祖先元素，...
position中的absolute、fixed区别
weixin_34163553的博客
08-11 114
absolute： 绝对定位，相对于body。 　 fixed： 固定定位，相对于浏览器视窗，不随滚动条的滚动而滚动。 这两个属性概念比较模糊，一般在做左边列表菜单，右边内容区域的时候会用到这样的定位，有时候需要左边列表不随滚动条滚动，右边内容随滚动条滚动就会用到不同的属性。 转载于:https://www.cnblogs.com/binstyle/p/5760636.html...
认识position：fixed/absolute/relative
HZ___ZH的博客
12-18 429
1.position: relative 相对定位，不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。 2.position:static 正常流（默认值），不能通过z-index进行层次分级。(设置left等无效) 3.position:absolute 绝对定位，脱离文档流的布局，子元素脱离文档流，可导致父元素无法被撑开，遗留下来的空间由后面的元素填充。通过 top,bottom,left,right 定位，定位的起始
CSS中position属性之fixed实现div居中
09-03
`position`属性有多个值，如`static`、`relative`、`absolute`和`fixed`，每种都有其特定的用途。在这个场景中，我们主要关注的是`fixed`值，它用于创建一个固定定位的元素，即元素的位置相对于浏览器窗口，而不是其...
css中关于定位属性position为fixed的使用记载
01-21
在html中，当一个div想要定位时，我们第一反应是position属性，而position属性除了默认值外，还有absolute,relative和fixed。当被设置成fixed时，可以通过设置left、right、top、bottom的值来相对于body定位。 代码...
CSS position属性absolute relative等五个值的解释
12-13
目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过），以下是w3school对position五个值的解释： 其中absolute和relative是最常用的...
css中的position属性值的探究(小结)
09-22
`position`属性有五个可选值：`static`、`relative`、`absolute`、`fixed`以及`sticky`，每个值都有其独特的功能和应用场景。 1. **`position: static`** - 这是元素的默认值，意味着元素遵循正常的文档流。`...
position中absolute和fixed的区别
weixin_43521579的博客
03-03 4468
position中absolute和fixed的区别 fixed:固定定位 absolute:绝对定位 共同点：都脱离了文档流。 区别： 在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动 常用场合： 1.fixed常用于网站边缘的公司联系方式和快速回到顶部 2.absolute常用于页面 ...
css的position中absolute和fixed的区别
weixin_34309543的博客
02-22 417
fixed:固定定位 absolute:绝对定位 区别很简单： 1、没有滚动条的情况下没有差异 2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动 常用场合： 1.fixed常用于网站边缘的公司联系方式和快速回到顶部 2.absolute常用于页面 、、、、、、、、、、、、、、、、、、、、、、、 我们知道，css的p...
【固定定位和绝对定位】
Clover ‘s Blog
12-29 1099
固定定位以及绝对定位区别
position的absolute与fixed共同点与不同点
鸡血博客
09-29 3911
这个问题面试被问到过~~ position属性是对于元素位置设置的属性，一般来说fixed是相对于window窗口的不会随着页面的滚动而位置发生变化 absolute是相对于页面中的元素位置设置的，所以位置会随着页面的滚动而发生变化，不会固定不变。如果页面没有滚动条的时候，两者的效果是一样的。 fixed:固定定位 absolute:绝对定位 区别很简单： 1、没有滚动条的情况下没有差...
position:fixed元素定位，如何不影响下面的布局
qq_44920883的博客
04-19 1万+
position:fixed；一般是用来定位头部导航栏，固定头部在最上方的位置，不会因为页面滚动产生影响 fixed是一个绝对定位的元素，是相对于整个浏览器窗口进行定位，相对定位一旦移动就会不占据原来的位置，后面的元素就会向上位移； 解决方法： 1.在fixed定位的元素最外面一层div，并设置一个相同的宽高(推荐使用) ```bash <style type="text/css"&gt...
CSS属性详解——position:fixed
Wod_7的博客
06-04 9436
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
css定位属性position:fixed
wangooo的博客
01-02 2675
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
position:fixed;
热门推荐
m0_37972548的博客
12-26 4万+
为什么设置position：fixed；div会消失。 此文如有不正确的地方，敬请留言指出，谢谢。 1.position:fixed;作用 生成绝对定位的元素，相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom" 属性给目标元素定位。 例如：将id = content 的div固定在窗口底部，距离窗口左边距离200px。滚动条上下滚动
CSS中position属性( absolute | relative | static | fixed )详解
wangshuai13383347132的博客
04-07 1769
我们先来看看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中position的属性值
12-06
CSS中position属性有四个可选值，它们分别是：static、absolute、fixed、relative。其中： 1. static：默认值，元素在文档流中正常排列，不受top、bottom、left、right影响。 2. absolute：元素的位置相对于最近的已...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值