css中的relative相对定位的top bottom left right

最新推荐文章于 2021-06-25 20:37:37 发布
原创 最新推荐文章于 2021-06-25 20:37:37 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解释了CSS中相对定位（position:relative）的原理，以及在JavaScript中如何正确获取元素的位置，特别强调了不同浏览器对于未显式指定定位属性元素位置的默认处理方式。

这个relative是指相对于这个对象原来所在位置（参照）的值，如某个对象有"position:relative"的样式，那么设置该对象的css "top:10px",结果是该对象相对其原来位置像正方向（向下）偏移10px。

js在获取这个top值的时候，如果css中没有显式指定这个值，IE，chrome，oprea等认为该值为auto，firefox认为该值为0px

一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6452
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
一文读懂css的相对定位【relative position】以及相对定位为什么要设置偏移量？
念兮为美
07-24 2238
一文读懂css的相对定位【relative position】以及相对定位为什么要设置偏移量？我们在开发的过程中，经常使用相对定位，但相对定位是相对谁定位，那么，它的起始位置又是什么呢？这篇文章会带你熟悉相对定位的。......
相对定位
努力努力再努力
07-22 1282
第一节课： （1）加一个position：relative； 表明是相对定位。 （2）相对布局不会脱离标准流（脱标），还是会在标准流中占用一定的空间。 （3）相对定位中有以下几种属性，相对定位结合以下几个属性使用： top: ; right: ; bottom: ; left: ; （4）什么是相对定位？ 相对定位就是相对于自己以前在标准流中的位置来移动的
CSS深入理解之relative
热门推荐
qq_25178609的博客
07-11 1万+
今天看到一个特别有趣的视频，讲解position：relative，听完这个老师生动的讲解，瞬间就懂了 看完漫画做个总结啊： 1 . position:absolute; 他的意思是绝对定位，默认上溯父级元素，找第一个不是 static 的元素，以其为 absolute 的基准。如果设定TRBL并且父级没有设定position属性，那么当前的a
CSS中的相对定位(relative)
BlueDreamerr的博客
07-13 3622
本人的另一篇文章已经讲过绝对定位，这篇文章我们来说说css中的相对定位。 css中有四种定位：默认，绝对（absolute），相对（relative），固定（fixed）， 话不多说，先把代码贴出来： <!DOCTYPE html> <html> <head> <title>absolute</title> ...
css 相对定位 绝对定位 浮动 分析
09-25
`，我们可以使用`left`、`right`、`top`和`bottom`属性来调整元素相对于其原始位置的位置。例如： ```css #box_relative { position: relative; left: 30px; top: 20px; } ``` 即使元素的位置发生改变，它仍然...
css中定位中的absolute和relative是什么意思
09-25
- `absolute`定位时，`top`、`right`、`bottom`和`left`属性用于定义元素相对于最近定位祖先的位置。例如，`top: 0`和`left: 0`会使元素位于其祖先的左上角。 - 如果同时指定了`top`和`bottom`，或者`left`和`...
relative定位下要使用top、left，而不是margin-top、margin-left
软件工程小施同学 的专栏
12-27 2746
如果需要某个元素相对定位到父级元素的某个位置， 那个需要给父级元素加”position: absolute;"，给子元素加“position:relative", 子元素的定位要使" top: 30%; left: 30%"之类的来确定位置， 而不是使用 “margin-top: 30%; margin-left: 30%"， 因为这样可能造成在某些浏览器不支持
html div relative top 多出一截,position:absolute元素高度自适应，换成relative设置top试试...
weixin_36403106的博客
06-25 1086
position:absolute元素高度自适应，换成relative设置top试试这篇文章发布于 2019/11/08，归类于 CSS标签：position:absolute元素高度自适应，怎么用js计算元素高度一般元素设置position:absolute后，就已经脱离了文档流，用css是无法计算其高度的，只能用js获取dom来计算。另外不要把自己限制死了，对于自适应高度的，为什么一定要使用p...
CSS中的绝对定位与相对定位
晨曦雨露的博客
01-02 385
层级关系为： 效果图： 为改变参照物（橘色框）后的效果 层级关系为： 效果图： 参照物为最顶级的元素情况。 层级关系为： 效果图：   仅使用margin属性布局绝对定位元素的情况 此情况，margin-bottom 和margin-right的值不再对文档流中的
css relative的一点点理解
qianbeichenchen的博客
11-07 197
position：relative 相对定位， 在一个相对定位的元素上设置top,left,bottom,right会使其偏离正常位置。其他的元素的位置并不会受该元素的影响发生位置改变（来弥补他偏离后剩下的空隙）。 ...
relative定位属性中top等单位使用%是基于谁？
weixin_34122810的博客
12-16 313
这是一篇全过程探究，如果不想看探究过程直接看结论直接看最后面 昨天在对css中各单位属性进行一些查阅了解，发现好像并没有关于relative定位属性单位为%时的文章，今天就来探究一下。 测试环境为Chrome浏览器 首先看一下w3cschool上关于relative属性的定义 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或...
设置了相对定位relative之后，改变top值，如何去掉多余空白？
http://xueshuai.top
08-12 3045
众所周知，relative和absolute有一个区别在于relative是相对自身定位，而absolute是相对于最近的定位父级定位，而此时的相对定位经过top值改变其在文档流中的位置之后，自身本来的位置依然在文档流中占据位置。 要想解决这个问题，我的想法就是给个margin负值，以减少下方的空白 <body> <!-- 此时div占据的位置是他自身...
css relative设置top为百分比值
chuluxie3918的博客
08-26 659
本文转载于:猿2048网站css relative设置top为百分比值 前言： 最近在学习HTML、CSS的过程中，想模仿一下百度首页。发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化（效果如下图所示），于是自己研究了一下并记录下来。 效果实现 <!DO...
position:relative(在相对定位的元素上设置top,right,bottom,left属性会使其偏离其正常的位置)...
weixin_34390996的博客
11-13 2233
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;10.relative&lt;/title&gt; &lt;style&gt; * { marg
深入解析HTML和CSS中的绝对与相对定位
当我们对一个元素设置为相对定位时，它仍然占据在文档流中的空间，但是可以通过left、right、top和bottom属性进行偏移。需要注意的是，相对定位不会将元素从文档流中完全移除，它只是相对于它原本的位置移动，因此，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值