css relative和absolute定位区别

最新推荐文章于 2024-07-28 17:38:46 发布
最新推荐文章于 2024-07-28 17:38:46 发布
阅读量499 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q285661571/article/details/7420778
版权

relative相对于原来正常位置定位

absolute相对于整个页面定位


relative和absolute都是把元素浮出页面竖直上方，不同的是，relative是仍在

页面保留占位，也就是不影响其它元素的位置，而absolute不再页面保留占位，

所以对页面的其它元素位置有影响


position的默认值是static

q285661571
关注
专栏目录
css中定位中的absolute和relative是什么意思
09-25
理解`relative`和`absolute`定位的关键在于它们如何影响元素自身及其周围元素的位置。`relative`定位允许元素在文档流中微调位置，而不改变其他元素的布局；而`absolute`定位则让元素可以完全独立于文档流，根据需要...
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 5702
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
relative和absolute的使用(详细+案例)
qq_48968669的博客
05-10 1531
相对定位relative：相对于自己原先的位置而调整位置 eg: 原先位置（在没有加top,left,right,bottom调整位置） 根据原先位置加top而调整定位 绝对定位absolute：absolute(子)+relative(父)是固定搭配，如果父元素或祖先元素没有设置相对定位relative，则根据浏览器而定位 eg: absolute(子)+relative(父)的搭配使用 (有absolute一定要有relative) 如果父元素没加relative,则absolute会寻找离他最
absolute与relative两种定位方式
最新发布
qq_55097440的博客
07-28 311
在使用这些定位方式时，通常需要结合使用，比如将一个元素设置为 ，然后将它的子元素设置为 ，这样就可以相对于父元素定位子元素。这种方式常用于精确控制布局中的元素位置。
Absolute（绝对定位）与relative（相对定位）的图文讲解
热门推荐
weixin_42067967的博客
04-30 9万+
Position的属性值有：1.     Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2.     Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3.     Relative：相对定位，是相对于其原本的位置来定位的。4.     Static：默认值，没有定位。5.     Inherit：继承父元素的position值。对于初...
CSS 中相对定位(relative)与绝对定位(absolute)的详解
路宇的博客
12-14 6491
position:relative 相对定位详解 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。 相对定位的特点： 它是相对于自己原来的位置来移动的(移动位置的时候参考点是自己原来的位置) 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方对待它(不脱标，继续保留原来的位置)。因此相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。 position:absolute 相对定位详解 绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的（拼爹型）。 绝对定位的特点： 如果没有祖
CSS中的relative和absolute的区别
xu3tu的博客
04-11 385
relative 是相对元素本身进行定位，不会脱离文档流，其之前的位置保留； absolute基于前一个不是static定位的父元素进行定位，脱离文档流，之前位置不保留。...
Div CSS absolute与relative的区别小结
10-30
总之，通过本文的介绍，我们可以了解到CSS中的absolute与relative定位方式的区别和它们各自的应用场景，它们在网页布局中的运用能够有效地解决布局问题并创造丰富的视觉效果。对于前端开发者而言，灵活运用这两种...
css position: absolute、relative详解
10-30
总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...
区别div和span、relative和absolute、display和visibility
09-25
在网页设计和开发中，了解并正确使用HTML标签和CSS属性是至关重要的。今天我们将深入探讨容易混淆的三个概念：`div`与`...正确的使用能帮助开发者更好地控制元素的布局、显示状态和定位，从而实现更精美的网页设计。
absolute和relative的区别
m0_47843571的博客
10-19 5765
1,文档流不同 elative 不脱离文档流，absolute 脱离文档流。` 2,分级不同 1，elative 参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。 2，absolute通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 3，定位不
css关于relative和absolute的区别
a2886015的博客
03-05 520
TRBL属性设定的是组件相对于浏览器或父组件的位置，而不是其相对于边界要偏移的距离，如right:1%设定后，组件的位置就到了浏览器或父组件最右边了，只是离右边界有1%的距离。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性（TRBL）设定的位置是在初始位置的基础上移动。，如right:1%设定后，元素会向左移动1%，即相对于父组件的右边界偏移1%的距离，父组件设定的padding有效。与relative的区别是其在正常流中的位置不再存在，
CSS中，relative和absolute的区别，及结合使用
good god~的博客
08-25 2204
固定定位 写法：position：fixed； 不会随浏览器窗口的滚动条滚动而变化，总是在视线里的元素（例如两边的广告，这个比较简单就不进行介绍） 相对定位 写法：position：relative； 定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。 相对于本身偏移，没有脱离文档流。 <div class="box"> <div class...
相对定位(relative)和绝对定位(absolute)的区别
zhajiangmian_1998的博客
05-29 6114
今天来给大家分享一下html中相对定位(relative)和绝对定位(absolute)的区别：先来波理论解释吧！一：绝对定位  position：absolute绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝...
定位之——相对定位（relative）与绝对定位（absolute）
weixin_y18485705761的博客
05-24 3585
对于相对定位与绝对定位这是很重要的知识点，前端学的怎样也是看你的定位学的怎样，他影响了你的整个页面的排版与布局，废话不多说让我们来看看相对定位和绝对定位吧。position 属性规定元素的定位类型。
CSS中absolute和relative的区别
Low_Key_Shulman的博客
03-04 1173
好久没更新了，最近想把之前学习到的知识都做一个整理，可能大家在用CSS排版时容易有一个困惑就是position:relative和position:absolute有什么区别，之前也在不断地练习和查资料中弄清楚了他们的差别。下面简单说一下。1.position:relativerelative是相对定位，设置position为relative的元素，其top、left、right、bottom值会相
决定定位和相对定位的区别
gao_zhennan的博客
03-31 1483
前言：学过的好多知识经常是当时学会了、理解了，但是过一段时间不使用就会差不多忘记了，又要花费时间去重复学习。为了避免或者减少重复学习学过的知识，因此对学过的东西进行总结。本文基于“Absolute（绝对定位）与relative（相对定位）"展开，做出了部分修改和补充。 Position的属性值有： 1.     Absolute：绝对定位，是相对于
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 1万+
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
CSS定位深度解析：relative, absolute, fixed
在实际应用中，relative和absolute定位的区别主要体现在以下几个方面： - 存在性：relative定位的元素在文档流中仍占据空间，而absolute定位的元素则不占。 - 参照对象：relative定位的元素相对于自己本身进行偏移，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值