position:relative 详解

最新推荐文章于 2024-07-23 22:34:05 发布
最新推荐文章于 2024-07-23 22:34:05 发布
阅读量6.1k 收藏 4
点赞数 1
分类专栏： 切图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zchcode/article/details/20460885
版权
position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位.
relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了，
如果被定义成relative的对象被移出了 他原来的位置还在，别的元素就不能替代这个位置
太羽
关注
专栏目录
相对定位——position: relative
weixin_48796690的博客
10-09 222
相对定位——position: relative
【前端学习笔记】CSS属性position以及各个属性值详解，及清除浮动的方法
你好呀，欢迎你的到来。
05-06 850
position属性值： static，absolute，relative，fixed，sticky static absolute relative fixed sticky
position：relative
热门推荐
weixin_44874595的博客
07-30 5万+
1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。 <!DOCTYPE html> <html lang="en">...
CSS：position属性
最新发布
ChinaDragon10的博客
07-23 553
CSS：position属性 fixed、absolute、relative
神奇的position:relative;
weixin_34408717的博客
07-17 290
我承认我又标题党了，这里想说的是相对定位的设置有时候会起决定性的作用，比如在是否随滚动条移动时的控制。 先上两个示例： position:static; .parent{ display:block; /*position:relative;*/ width:200px; height:100px; overflow:auto; background:lightblue; } .pa...
position之relative
lbs311709000127的博客
01-18 6572
position：relative 作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素 特点： 可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。 相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有 任何元素都可以设置为relative，...
position:relative 的深入理解，欢迎探讨
mixer_a的专栏
05-25 341
对于css中的position:relative;我始终搞不明白它是什么意思，有什么作用？ 对于position的其它几个属性，我都搞懂了 引用 static : 　无特殊定位，对象遵循HTML定位规则 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边...
css position: absolute、relative详解
10-30
如果元素设置了position: relative，则可以通过left, right, top, 和 bottom属性来调整元素的位置。设置这些属性会使元素相对于它在文档流中的初始位置进行移动，但它的原始位置仍然会被保留，也就是说，即便元素...
Position属性之relative用法
09-03
《Position属性之relative用法详解》 在网页布局设计中，CSS（层叠样式表）的position属性扮演着至关重要的角色。本文将深入探讨position属性中的relative用法，帮助开发者更好地理解和运用这一特性。 首先，我们...
详解css粘性定位position：sticky问题采坑
12-14
CSS中的`position: sticky`是一种混合定位方式，它结合了`relative`和`fixed`的特点。在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕...
css：四种定位（position)以及z-index层级
YangLu888
10-08 1861
css的四种定位以及z-index层级调整
浅谈position:relative
weixin_30292843的博客
09-01 331
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> ...
position:relative的用法
波西塔塔博客
12-25 1万+
position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素… 比如要实现商品细节图展示的效果，可以使用如...
CSS属性详解——position:relative
Wod_7的博客
06-04 5959
CSS中的相对定位relative定位是一种定位方式，与绝对定位absolute定位不同的是，相对定位是根据元素在正常页面流中的位置来定位。相对定位使元素相对于其原始位置上下左右移动。这个过程并不会使元素脱离文档流。
CSS 元素的定位之相对定位 position: relative
歪脖先生的博客
02-21 1万+
定位在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。相对定位当一个元素的 position属性设置...
position各种
u010985901的专栏
08-21 114
[code="java"] position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static） 如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。 absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对...
CSS-相对定位——position: relative
cym_bj
06-26 1371
一、相对定位 1、相对定位就是相对于自己以前在标准流中的位置来移动。相对定位注意点:1、相对定位是不脱离标准流的，会继续在标准流中占用一份空间。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;定位01&lt;/ti
CSS:position:relative;的认识
天地会
03-23 5609
 CSS定位的原理把浏览器窗口想象成一个坐标系统：CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言，CSS定位要简单得多。 绝对定位一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。要对元素进行绝对定位，应将position属性的值设为a
CSS position属性详解：relative, absolute, fixed
当设置`position: relative`时，元素保持在文档流中的原有位置，但可以通过`top`, `bottom`, `left`, 和 `right` 属性相对自身进行偏移。这种偏移不会影响其他元素的位置，因为相对定位的元素仍占据原来的空间。 ``...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

太羽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值