absolute与relative

最新推荐文章于 2024-07-28 17:38:46 发布
原创 最新推荐文章于 2024-07-28 17:38:46 发布 · 361 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS

本文详细解释了CSS中相对定位(relative)与绝对定位(absolute)的区别。相对定位不会脱离文档流，而绝对定位则会完全脱离文档流。两种定位方式都可通过top、bottom、left、right属性来指定元素的位置，并且可以通过z-index属性来调整层级。

绝对定位与相对定位

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6486
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
Div CSS absolute与relative的区别小结
10-30
总之，通过本文的介绍，我们可以了解到CSS中的absolute与relative定位方式的区别和它们各自的应用场景，它们在网页布局中的运用能够有效地解决布局问题并创造丰富的视觉效果。对于前端开发者而言，灵活运用这两种...
Absolute（绝对定位）与relative（相对定位）的图文讲解
热门推荐
weixin_42067967的博客
04-30 9万+
Position的属性值有：1.     Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2.     Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3.     Relative：相对定位，是相对于其原本的位置来定位的。4.     Static：默认值，没有定位。5.     Inherit：继承父元素的position值。对于初...
relative与absolute问题
qq_42834220的博客
08-04 657
这次作业中还有一个花时间比较久的就是小部分的定位问题，比如在弹出窗口中 顶部的箭头其实是用图片显示的，之前有看到过用纯代码通过边框展现出箭头的效果，但是在这里却不能够使用，因为那种方法只能是产生这种效果 即没有线条的，当然现在也不能断言没有别的方法。 这种方法的原理图是这样的 代码 html <div class="item" style="width: 100p...
absolute和relative的区别
m0_47843571的博客
10-19 6078
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，定位不
li标签的position:absolute与relative案例应用
12-13
今天在写一个购物车里面选择发货地址的部分时，多个收货地址用到了UL标签，由于每个地址的后面有个“修改地址”的功能，而且位于li标签的右边，于是就用到了，position：absolute； right：10px；这样把“修改地址”...
关于CSS absolute与relative不得不说的话
09-22
由此可以看出，“relative”和“absolute”之间并不是简单的“相亲相爱”，而是存在着一种“控制与被控制”的关系。在设计网页时，如果需要利用绝对定位的灵活性，就必须考虑到可能的限制。开发者必须清楚地了解不同...
CSS中的position 的值： absolute 与 relative
04-12
`position`属性有多个可选值，其中`absolute`和`relative`是两个最常使用的值，它们在网页设计中扮演着关键角色。 **一、position: static** 这是所有元素的默认定位方式。`static`定位遵循正常的文档流，即元素会...
浅谈 relative 与 absolute
weixin_45815411的博客
04-15 729
浅谈 relative 与 absolute relative 与 absolute 属于 position 中的属性，positon除了这两种属性外，还有另外两种属性分别是 static 和 fixed。此处我们暂且不谈后两种属性，来谈谈 relative 与 absolute，让我们现在开始吧！ absolute absolute 顾名思义在英文中可译为绝对的，它在CSS中所表现的属性也是如此称为绝对定位； 格式如下： position:absolute; 好了，现在让我们来讲讲它的具体表
absolute 和 relative 比较
m4587的博客
07-25 369
一般用relative作为参照物（不用relative进行定位），用absolute进行定位给一个元素只设置一个relative，不设置left，right，top，bottom，看起来是对这个元素没什么影响的，但是它保留了原来的位置，就对后续元素没有什么影响absolute可以任意的调整自己的参照物，更加灵活，所以用于定位想让谁成为基地，就给谁relative定位，并且不设置方向。relative定位保留原来的位置进行定位，相对于自己原来（出生的）的位置进行定位。...
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 1万+
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
相对定位（relative）和绝对定位（absolute）
dibitui7403的博客
02-21 126
以前一直搞不清楚这两个究竟是怎么样的一回事，总觉得很难理解的，但是最近接触多了，也有点了解了。 相对定位（relative）：不会让出自己占用的位置 绝对定位（absolute）：会让出自己的占用位置 <div class="contain"> <div class="main"&...
absolute与relative两种定位方式
最新发布
持续输出，励志当全栈开发人员
07-28 567
在使用这些定位方式时，通常需要结合使用，比如将一个元素设置为 ，然后将它的子元素设置为 ，这样就可以相对于父元素定位子元素。这种方式常用于精确控制布局中的元素位置。
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
相对定位(relative)和绝对定位(absolute)的区别
zhajiangmian_1998的博客
05-29 6383
今天来给大家分享一下html中相对定位(relative)和绝对定位(absolute)的区别：先来波理论解释吧！一：绝对定位  position：absolute绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝...
CSS position属性中absolute与relative定位详解
资源摘要信息:"CSS中的position属性是控制元素在网页中定位方式的核心属性之一，...特别是relative与absolute的组合使用，构成了前端开发中最常见的定位模式之一，理解其原理有助于提升页面结构设计的灵活性与可控性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值