absolute和fixed的区别

最新推荐文章于 2022-10-12 14:54:28 发布
最新推荐文章于 2022-10-12 14:54:28 发布
阅读量536 收藏 1
点赞数
分类专栏： CSDN 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guolulu66/article/details/109043881
版权

fixed:固定定位

absolute:绝对定位

区别很简单：

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

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

常用场合：

1.fixed固定定位，只针对浏览器窗口定位，上下左右，不会随着窗口大小改变，固定不变，例如固定位置的小广告，常用于网站边缘的公司联系方式和快速回到顶部

2.absolute绝对定位，脱离文档流，没有父元素，上下左右设置是针对于浏览器窗口，不占据位置，会随着窗口大小与页面一起改变

guolulu66
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解flex布局与position:absolute/fixed的冲突问题
01-19
之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下： 项目实战： 我们现在想做一个头部的导航栏，又想用fixed把它固定在上方，又想用弹性盒布局去设置它内部的样式，可是发现其中的弹性盒布局已经失效了。 HTML代码如下： 协会简介 协会章程 协会架构 资料下载 CSS代码如下： ul { position: fixed; display: flex;
定位：relative相对定位、absolute绝对定位、fixed固定定位
m0_64460142的博客
04-08 4533
作者有话说:在学定位之前有了解过吗？再没学浮动之前，这些块元素标签会出现在一列，要想实现并排就可以使用浮动float，现在我们可以学习定位，给背景图片或者图片、div、border等添加属性等，有定位在祖先级的、定位在浏览器的，比如说浏览京东页面时，当你拉动网页的时候页面会动，但是会有一个栏目始终保持在那个位置不动，这就是使用的定位，接下来一起看看吧！ 定位使用position static 默认值，没有定位 relative 相对定位 ...
css中postion的fixed与absolute区别详解
09-25
主要介绍了css中postion的fixed与absolute区别详解,需要的朋友可以参考下
position中absolute和fixed的区别
weixin_43521579的博客
03-03 4412
position中absolute和fixed的区别 fixed:固定定位 absolute:绝对定位 共同点：都脱离了文档流。 区别： 在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动 常用场合： 1.fixed常用于网站边缘的公司联系方式和快速回到顶部 2.absolute常用于页面 ...
position的absolute与fixed共同点与不同点
鸡血博客
09-29 3764
这个问题面试被问到过~~ position属性是对于元素位置设置的属性，一般来说fixed是相对于window窗口的不会随着页面的滚动而位置发生变化 absolute是相对于页面中的元素位置设置的，所以位置会随着页面的滚动而发生变化，不会固定不变。如果页面没有滚动条的时候，两者的效果是一样的。 fixed:固定定位 absolute:绝对定位 区别很简单： 1、没有滚动条的情况下没有差...
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 8579
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
CSS中定位属性absolute和fixed的区别和用法
sinat_36227086的博客
03-02 866
1.区别 （1）absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 （2）fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 2.用法 如果需要元素相对右侧固定，但是能够随屏幕滚动，则用 absolute。注意父元素要为relative 如果元素不能随父
相对定位(relative)，绝对定位(absolute)，固定定位(fixed)
weixin_44446758的博客
05-08 1万+
一、绝对定位 position：absolute 绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（html）。 绝对定位本身与文档流无关，因此不占空间，元素会脱离文档流，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，并且可以通过z-index属性来...
fixed right如何设置上下滚动_CSS 定位、堆叠上下文
weixin_42463736的博客
12-21 558
定位（position）说起定位之前先复习一下文档流/正常流normal flow，即浏览器默认的文档布局方式：内联元素从左到右块级元素另起一行定位就是通过设置position属性的值来覆盖默认的布局方式！使用top、left、right 、bottom来改变位置position属性：position: static默认值默认的布局方式。position: relative相对默认的布局位置进行定...
position:fixed或absolute时百分比参考屏幕宽度
09-25
用百分比设定元素的宽度，一般情况是指参考父元素的宽度，当position是fixed或absolute时，百分比是参考屏幕的宽度
fixed计算机术语,fixed是什么意思
weixin_29158413的博客
07-04 4848
fixed的意思：(1)adj. 固定的; 不变的; 不能变的; 不易改变的; 执著的; 呆板的;(2)v. 使固定; 安装; 决定，确定(日期、时间、数量等); 安排; 组织;(3)n. fixed是一个计算机专业术语，指向托管变量的指针并在statement执行期间“钉住”该变量。2、读音：英[fɪkst] 美[fɪkst]3、原型：fix4、第三人称单数：fixes5、复数：fix...
html中fixed属性,CSSposition属性中：fixed使用详解
weixin_31999597的博客
06-05 6992
关于fixed属性，在什么情况下需要用，怎么用，首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。那么，我们了解了fixed属性的说明后，就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用position...
Css fixed和absolute定位区别
热门推荐
taoerchun的专栏
08-20 2万+
fixed:固定定位 absolute:绝对定位 区别很简单： 1、没有滚动条的情况下没有差异 2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动 可以这么理解，fixed：固定在当前window不动， absolute：会随参照对象元素的高度和宽度变化而变化 一般fixed用在遮盖层和固定在页面某个位置，如固定在顶
Position属性四个值：static、fixed、absolute和relative的区别和用法
weixin_30567471的博客
10-28 683
　　在用CSS+DIV进行布局的时候，一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚，以致经常会出现让人很郁闷的结果。今天研究了一下，总算有所了解。在此总结一下： 先看下各个属性值的定义： 1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-in...
【CSS】Css设置position:absolute div标签不随页面滚动而滚动
dkz97的博客
06-30 1万+
问题原因   最近实习在修bug的时候，遇到一个问题。简单来说html的结构就和下面差不多 <body> <!-- 省略多个外部结构 有overflow:auto--> <div id="下拉框点击按钮"> <div id="下拉框窗口" style="position:absolute; left=xxx; top=xxx"> 当然这只是简单的结构 </div> </div> </bo
relative，absolute，fixed的区别及具体用法
HouYing
10-12 492
relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。
position的relative、fixed、absolute的三种方法使用
~牧马~
10-24 425
position的使用 fixed 为固定定位，脱离文档流，主要以浏览器窗口大小来进行定位，简单来说，就是它的父元素只能看做是浏览器窗口。 relative 为相对定位，不脱离文档流，以父元素标签为参考，来进行相对定位，会随着父元素的位置改变而发生位置变化。 absolute 为绝对定位，脱离文档流，以父元素标签为参考，来实现绝对定位，简单来说就是，即是父元素发生变化，它自身也不会发生如何变化。 总结 这里主要是：你首先要清楚你的demo是依赖于浏览器窗口还是父元素，再来判断它是否需要伴随父元素的位置改变而
HTML/CSS属性position值static、fixed、relative和absolute的区别与用法
╮(╯_╰)╭ Don't expect me to reply to you in time
08-21 1118
1、static：静态定位，默认，相当于没设置，top、right、bottom、left属性（以下简称TRBL）和z-index属性不生效 2、fixed：固定定位，相对于浏览器窗口来定位，TRBL属性和z-index属性有效 3、relative：相对定位，相对于直接父级来定位，TRBL属性和z-index属性有效 4、absolute：绝对定位，相对于同类父级来定位，即向上查找紧邻的父...
absolute 和 fixed
最新发布
07-27
absolute 和 fixed 是 CSS 中用来定位元素的两种定位方式。 absolute 定位是相对于最近的已定位祖先元素进行定位的。如果没有已定位的祖先元素，则相对于最初的包含块（通常是浏览器窗口）进行定位。通过设置元素的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值