javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:主页 > WEB前端 > CSS-HTML >

关于css属性absolute的一些解析

来源:IT技术网编辑:kkx58发布于:2011-03-01人围观CSSabsolute属性

记得刚认识absolute的时候,不知道在哪本参考书上看到过关于关于它的介绍,大概意思是这样的,“一个定义了absolute的子级元素(以下简称child)总离不开一个定义relative的父级元素(以下简称parent),否则child将相对于body定位”,时至今日,我不敢说这样的理解是错误的,但是难免有点歧义或者以偏概全!废话不多说,先看实例图:

 

[js]代码:

  
  

如果将绿色块对应的html代码(未设置absolute)放在紫色块对应的html代码的下面,按照html由上而下的解析顺序,也就是先解析absolute,后解析普通流元素,那么显示效果将如下:

上面的这两种情况中,仅仅用margin来控制child的位置,并没有用left、top。原因很简单,在parent中并未设置relative,而child设置了absolute,如果在此时用left、top来控制child的位置,后果可想而知,会出现child脱离parent元素而去亲近body的现象,这也恰恰印证了参考书中那句话的正确性。之所以说它有歧义,就在于它缺少了一个很重要的前提条件(child设置left、top)!

对于给每个absolute的子级元素都嵌套一个relative的父级元素的情况,我认为是absolute最标准的用法,相信也是最容易理解的,其优点在这里不再赘述!另外友情提示一下,在css2中文手册(苏沈小雨版)中关于position定位的说明有失精准,见下图:

CSS,absolute,属性,相关的文章
有时间的话来看看IT界的突发事件