码迷,mamicode.com
首页 > 其他好文 > 详细

总结绝对定位和相对定位

时间:2015-07-13 13:35:43      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

 定位分为4种:
1:static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
(2)absolute元素框偏移某个距离。http://www.w3cfuns.com/thread-258-1-1.html

  无父级:参照浏览器左上角

  有父级:父级无position,参照浏览器左上角

      父级有position,参照父级左上角
(3)relative元素框从文档流完全删除,并相对于其包含块定位。

  无父级:参照自身原来在文档流中位置的左上角

  有父级:父级无position,参照自身原来在文档流中位置的左上角

      父级有position:有padding,参照padding

              无padding,参照自身原来在文档流中位置的左上角

(4)fixed元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

  始终不动
总结:如果用定位来布局来定位页面,父级元素的Position 的属性必须设置为relative,而位于父级内部的某个元素最好用absolute,因为他不会受父级元素padding的影响,当然你也可以用relative,但不要忘记计算padd的值

总结绝对定位和相对定位

标签:

原文地址:http://www.cnblogs.com/BaishangBloom/p/4642477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!