你的位置:首页 > 软件开发 > 网页设计 > 辨析relative与absolute

辨析relative与absolute

发布时间:2016-02-27 19:00:04
谈起它们,想必大家都不陌生。relative,相对定位嘛;absolute,绝对定位嘛。但是它们到底是个啥东东呢?看看w3c的定义,见下表定位含义relative元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。absolute元素框从文档流完全删除,并相对 ...

谈起它们,想必大家都不陌生。relative,相对定位嘛;absolute,绝对定位嘛。但是它们到底是个啥东东呢?

看看w3c的定义,见下表

定位

含义

relative

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

我靠,说了这一啪啦,好像有点模糊啊。

不用怕,团结就是力量,让我们一起,一步一步来解析它们吧。

一、relative

针对上面w3c对relative的定义,我们首先来写个demo。

辨析relative与absolute辨析relative与absolute
<!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>

原标题:辨析relative与absolute

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录