谈起它们,想必大家都不陌生。relative,相对定位嘛;absolute,绝对定位嘛。但是它们到底是个啥东东呢?看看w3c的定义,见下表定位含义relative元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。absolute元素框从文档流完全删除,并相对 ...
谈起它们,想必大家都不陌生。relative,相对定位嘛;absolute,绝对定位嘛。但是它们到底是个啥东东呢?
看看w3c的定义,见下表
定位 | 含义 |
relative | 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。 |
absolute | 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 |
我靠,说了这一啪啦,好像有点模糊啊。
不用怕,团结就是力量,让我们一起,一步一步来解析它们吧。
一、relative
针对上面w3c对relative的定义,我们首先来写个demo。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { border:1px solid #FF0000; position:relative; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:辨析relative与absolute
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。