absolute与relative两种定位方式

于 2024-07-28 17:38:46 发布
阅读量493 收藏 5
点赞数 5
CC 4.0 BY-SA版权
分类专栏： # 前端学习总结 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55097440/article/details/140753546

title: absolute与relative
date: 2024-07-28 17:33:36
tags: css

相对定位（relative）

  • 相对定位的元素是相对于其正常位置进行移动的。
  • 当使用相对定位时，元素仍然占据在标准文档流中的原始位置，即使它被移动了。
  • 可以使用 top, right, bottom, left 属性来设置元素相对于其原始位置的偏移量。
  • 相对定位通常用于对元素进行微小的调整。

绝对定位（absolute）

  • 绝对定位的元素是相对于最近的已定位祖先元素（relative, absolute, fixed）进行定位的。如果没有已定位的祖先元素，那么它是相对于 <html> 元素进行定位的。
  • 使用绝对定位的元素会脱离标准文档流，不占据空间，其原始位置不会被保留。
  • 也可以使用 top, right, bottom, left 属性来设置元素的位置。
  • 绝对定位通常用于创建复杂的布局，例如模态窗口、下拉菜单等。

位移方式比较

  • 相对定位的位移是相对于元素自身的原始位置。
  • 绝对定位的位移是相对于最近的已定位祖先元素的位置。

在使用这些定位方式时，通常需要结合使用，比如将一个元素设置为 relative，然后将它的子元素设置为 absolute，这样就可以相对于父元素定位子元素。这种方式常用于精确控制布局中的元素位置。

总结

一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6287
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
Div CSS absolute与relative的区别小结
10-30
在Web前端开发中，CSS布局技术是一个核心组成部分。其中，定位（Positioning）是CSS中一个重要的概念，它允许我们对元素进行...对于前端开发者而言，灵活运用这两种定位属性对于实现美观且功能强大的网页设计至关重要。
Absolute（绝对定位）与relative（相对定位）的图文讲解
热门推荐
weixin_42067967的博客
04-30 9万+
Position的属性值有：1.     Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2.     Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3.     Relative：相对定位，是相对于其原本的位置来定位的。4.     Static：默认值，没有定位。5.     Inherit：继承父元素的position值。对于初...
absolute与relative
at sea
05-29 339
绝对定位与相对定位relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。 absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 1万+
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
css中定位中的absolute和relative是什么意思
09-25
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素在页面上的排列方式。`position`有四个可能的值：`static`、`...在实际的网页设计和开发中，这两种定位方式的组合使用能够实现各种复杂的布局效果。
关于CSS absolute与relative不得不说的话
09-22
在Web开发过程中，CSS（层叠样式表）的设计和应用是构建网页...理解这两种定位方式的差异，以及它们如何相互作用，对于前端开发人员来说是非常重要的。通过恰当的使用这两种定位技术，可以实现复杂且美观的页面布局。
position:relative/absolute无法冲破的等级
10-31
本文将深入探讨`relative`与`absolute`定位方式在特定情况下的局限性及其解决方案。 #### 关键概念解释 - **position:relative**：相对定位。元素相对于其正常位置进行定位，即相对于自身原来的位置偏移，不会脱离...
relative与absolute问题
qq_42834220的博客
08-04 635
这次作业中还有一个花时间比较久的就是小部分的定位问题，比如在弹出窗口中 顶部的箭头其实是用图片显示的，之前有看到过用纯代码通过边框展现出箭头的效果，但是在这里却不能够使用，因为那种方法只能是产生这种效果 即没有线条的，当然现在也不能断言没有别的方法。 这种方法的原理图是这样的 代码 html &amp;lt;div class=&quot;item&quot; style=&quot;width: 100p...
absolute和relative的区别
m0_47843571的博客
10-19 6035
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，定位不
浅谈 relative 与 absolute
weixin_45815411的博客
04-15 693
浅谈 relative 与 absolute relative 与 absolute 属于 position 中的属性，positon除了这两种属性外，还有另外两种属性分别是 static 和 fixed。此处我们暂且不谈后两种属性，来谈谈 relative 与 absolute，让我们现在开始吧！ absolute absolute 顾名思义在英文中可译为绝对的，它在CSS中所表现的属性也是如此称为绝对定位； 格式如下： position:absolute; 好了，现在让我们来讲讲它的具体表
定位之——相对定位（relative）与绝对定位（absolute）
weixin_y18485705761的博客
05-24 4221
对于相对定位与绝对定位这是很重要的知识点，前端学的怎样也是看你的定位学的怎样，他影响了你的整个页面的排版与布局，废话不多说让我们来看看相对定位和绝对定位吧。position 属性规定元素的定位类型。
absolute绝对定位
happyYYhy的博客
03-01 692
分为两种情况： 1、父级(所有的，包括直接和间接父级)中没有定义position属性，那么将会参照浏览器的左上角，并且配合top、right  bottom、left四个偏移属性对定义了绝对定位属性的子元素进行定位； 2、 父级元素中定义了position属性，则会参照父级(可能是直接也可能是间接，但应该是最近的)元素，联合top等四个属性来定位定义了绝对定位属性的子元素，其
absolute 和 relative 比较
m4587的博客
07-25 337
一般用relative作为参照物（不用relative进行定位），用absolute进行定位给一个元素只设置一个relative，不设置left，right，top，bottom，看起来是对这个元素没什么影响的，但是它保留了原来的位置，就对后续元素没有什么影响absolute可以任意的调整自己的参照物，更加灵活，所以用于定位想让谁成为基地，就给谁relative定位，并且不设置方向。relative定位保留原来的位置进行定位，相对于自己原来（出生的）的位置进行定位。...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
csgojingyu的博客
10-21 2万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
关于absolute定位
weixin_30306905的博客
07-22 108
先上图吧。 as you see 这是一个购物车的表单，有商品的各种信息。让我们观察红色方框圈起来的部分，第一行只有一个价格$117，第二行除了这个价格，还有个原价（划掉的部分）$130。 整个表是一个<table>，价格部分在<td>中。关键是样式，$117那一部分文字总是在一行的中间，与本行的其他文字在一条水平线上，这一部分的位置不受到$130的影响。 ...
position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？
yiyueqinghui的博客
09-19 1万+
常见的position定位方式如下: static 默认值。元素出现在正常的普通流中 relative 生成相对定位的元素，相对于其在普通流中的位置进行偏移。 fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 iframe 进行定位。 inherit 继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。 absolute 生成绝对定位的元素， 相对于最近一级的 不是 static 的父元素来进行定位,如果没有找到的话，最
position 的值， relative 和 absolute 分别是相对于谁进行定位的？
最新发布
zzx262625的博客
03-09 506
absolute : 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。 fixed （老 IE 不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。 static 默认值。没有定位，元素出现在正常的流中 sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出
CSS定位属性relative与absolute深入解析
在CSS（层叠样式表）中，定位是一个核心概念，允许我们控制元素在页面上的位置。...在使用时，开发者需要根据布局需求和上下文关系来选择合适的定位方式。通过精心的定位设计，可以实现更加丰富和动态的网页布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值