css中absolute和relative的问题

最新推荐文章于 2024-12-16 10:02:26 发布
最新推荐文章于 2024-12-16 10:02:26 发布
阅读量570 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xuchuanliang11/article/details/78210470
本文详细解析了CSS中position属性的relative与absolute两种值的区别与用法。relative定位相对于元素原本的位置，而absolute则相对于最近的已定位祖先元素或body进行定位。

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

position的值，relative和absolute分别是相对谁进行定位：absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位；relative 生成相对定位的元素，相对于其在普通流中的位置进行定位

详细解释一：    

absolute在子div，他的父元素必须有个position属性默认不是static的，这样它就可以以父类为参照进行定位

relative是已自身为参照，意思是他原本应该在什么位置，加上relative属性后，会以他原本按照文档流应该在的位置为参照进行定位

详细解释二：

absolute决定定位，相对于最近的已经定位的祖先元素(position为absolute或relative的)进行定位

relative相对定位，相对于本元素原始位置进行定位

详细解释三：

absolute相对于已经定位的祖先元素，否则相对于body

relative相对于本身应该存在的位置

一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6300
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
面试官：介绍一下CSS定位？absolute和relative分别依据什么定位？
upgrade_bro的博客
09-01 926
取值名称效果static静态定位(默认值)元素按照标准流布局(不脱标), top、bottom、left 、right等属性不起作用relative相对定位元素按照标准流布局(不脱标)，可以通过top、bottom、left 、right进行定位，定位参照对象是自身在标准流布局中的位置absolute绝对定位元素脱离标准流（脱标），可以通过top、bottom、left 、right进行定位，定位参照对象是最邻近的祖先定位元素， 如果找不到这样的父级元素，参照对象是视口。
css中的relative（相对位置）和absolute(绝对位置)
yangxiaonawzy的专栏
06-20 2万+
  这几天在看div+css，在网上找到了很多的资料，我都不知道选择哪一个了。这两天在看>，感觉还可以。把今天学习过程中遇到的问题和知识点，给记录下来。 首先学习到的是css中的相对定位和绝对定位。定位标签：position包含属性：relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
热门推荐
csgojingyu的博客
10-21 2万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
【CSS】一图搞懂 absolute 和 relative
weixin_42678675的博客
07-08 776
CSS 的 position 属性，用图示来帮助你理解！老规矩，结论在最下方，探索过程在中间，根据你自身需要选择！
浅谈CSS之Position
weixin_30867015的博客
02-06 204
"对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative这个吧，然后再加上top,right给限制一下。 position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static） 如果你想让这个...
css中定位中的absolute和relative是什么意思
01-19
用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值：static、fixed、absolute和relative， 后面两个在布局中的定位里是经常用到的，...
Div CSS absolute与relative的区别小结
10-30
总之，通过本文的介绍，我们可以了解到CSS中的absolute与relative定位方式的区别和它们各自的应用场景，它们在网页布局中的运用能够有效地解决布局问题并创造丰富的视觉效果。对于前端开发者而言，灵活运用这两种...
css position: absolute、relative详解
10-30
总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...
CSS普通属性篇(一)：relative与absolute
madman0621的博客
09-05 2499
一、position的属性值 首先基本了解下position的各个属性值： 1、static：默认值。没有定位，元素在正常显示出现（它将忽略top、bottom、left、right、z-index声明） 2、relative：生成相对定位的元素，相对于其正常位置进行移动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 3、absolu...
css之absolute
weixin_39037804的博客
09-14 422
一、absolute和float有相同的特性，包裹性和破坏性 1、absolute和float的相似(看下面的demo，如果图片在左上角，那么用float和absolute都一样) 1 <!docty...
CSS 中相对定位(relative)与绝对定位(absolute)的详解
路宇的博客
12-14 6667
position:relative 相对定位详解 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。 相对定位的特点： 它是相对于自己原来的位置来移动的(移动位置的时候参考点是自己原来的位置) 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方对待它(不脱标，继续保留原来的位置)。因此相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。 position:absolute 相对定位详解 绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的（拼爹型）。 绝对定位的特点： 如果没有祖
CSS 绝对定位
taobaohs的专栏
08-13 143
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素...
搞定HTML\CSS之absolute和relative
王文松的博客
12-09 6893
前言    这篇博文我要搞定的问题是①absolute和relative区别 ② top和margin-top区别  ③浏览器body默认内外边距 浏览器body默认内外边距    很多时候研究一些网站的源码，总会看到别人的CSS文件里有这么一句话" body{margin: 0; padding: 0;} "，那么为什么要加这么一句话呢？先用下面的现象抛出来。    如下代码
CSS定位 相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和粘性定位(sticky)
最新发布
博观而约取，厚积而薄发~
12-16 438
就是将盒子定在某一个位置，按照一定的规则进行摆放盒子。规则是：定位 = 定位模式 + 边偏移。文档流，窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素，即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和固定定位。定位模式，元素的定位方式，通过属性来实现，取值：1、static：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）；2、relative。
CSS中absolute与relative的区别和联系
pon的博客
03-31 603
absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读. Absolute Absolute，CSS中的写法是：position:absolute;他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGH...
CSS+DIV布局中absolute和relative的区别
qq_43511842的博客
02-06 280
来源 ：http://developer.51cto.com/art/201009/225201_1.htm 解释的肥肠八错，放在这以后自己也能看看，希望和我一样的小白，也能把这种知识弄的清楚通透，因为无论你现在看不看，以后总有一天你要看，闲着也是闲着，还是赶快弄清楚吧，不准偷懒喔！ 区别：定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，而定位为absolute的...
CSS 属性篇(一)：relative与absolute
weixin_34297704的博客
02-20 147
一、position的属性值 首先基本了解下position的各个属性值： 1、static：默认值。没有定位，元素在正常显示出现（它将忽略top、bottom、left、right、z-index声明） 2、relative：生成相对定位的元素，相对于其正常位置进行移动。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 3、absolute：生...
CSS中relative和absolute浅谈
soief的专栏
08-05 791
position它的四个定位属性我只谈其中两个，即：absolute和relative自我感觉就这两个比较有用。      absolute(绝对定位):  第一、如果它没有父级DIV，则它会根据浏览器原始点去定位，而且它的最大特点是跟他相邻的DIV则会忽略它的存在，定位后则
css中absolute和relative
03-16
CSS中的absolute和relative是两种定位方式。 relative相对定位，元素的位置相对于它原来的位置进行定位，不会影响其他元素的位置。可以通过top、bottom、left、right属性来调整元素的位置。 absolute绝对定位，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值