浅析绝对定位(absolute)的定位问题

绝对定位这个对于学习css的人来说是绝对要知道的一个知识点,主要谈谈绝对定位(absolute)这一概念的理解:

当层设置了position:absolute并产生偏移(设置了top,left等值)时,该层将完全从文本流中脱离,进而以该层所在的最近的有设置定位的父容器的坐标原点为参考点进行偏移,可以这理解,该层已经和同级容器中的其它元素脱离了关系,也不会对其它元素产生人和影响(当它不存在!)。

注意:如果父容器没有设置position属性或position值为static时,将以body的坐标原点为参考(或者说是最初的包含块:可能是画布或 HTML 元素)。

 body{
padding:0 0; margin:0 auto;}
.r{width:200px; height:200px; border:#CC0000 1px solid;margin:0 auto; }
.a1{position:absolute; top:40px; left:100px; border:#333333 1px solid; width:200px; height:100px;}
-->
绝对定位父容器未定义定位方式
子元素层,绝对定位层

效果如图:

绝对定位的父容器未定义定位方式

绝对定位的父容器未定义定位方式

如图,子元素层,设置的绝对定位是以body作为参考对象的。

 body{
padding:0 0; margin:0 auto;}
.r{width:200px; height:200px; border:#CC0000 1px solid;margin:0 auto; position:relative;}
.a1{position:absolute; top:40px; left:100px; border:#333333 1px solid; width:200px; height:100px;}
-->
绝对定位父容器定义定位方式为relative
子元素层,绝对定位层

修改父元素的定位方式后,效果如图:

修改父容器定位方式为relative后效果图

修改父容器定位方式为relative后效果图

此时的子层绝对定位就是以离他最近的定位的父层的作为参考的。

再次强调的就是“该层所在的最近的有设置定位的父容器的坐标原点为参考点进行偏移”。

相关文章

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

无觅相关文章插件,快速提升流量