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

布局模型 之 层模型(position的relative、absolute与fixed区别?)

时间:2017-08-23 22:58:12      阅读:719      评论:0      收藏:0      [点我收藏+]

标签:absolute   fixed   relative   


  css的布局模型分为流动模型(Flow)、浮动模型(Float)、层模型(Layer)。


  浮动模型(Float)和层模型(Layer)有什么显著区别?

    浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动;浮动的元素仍然会占据文档流的物理空间。关于浮动模型的详细说明请看另一篇文章的介绍。http://ycgit.blog.51cto.com/8590215/1958452


  层模型(Layer):设置为层模型的元素已从文档流删除,在文档流上层一层层覆盖,写在后面的层模型元素会覆盖前面层模型元素,层模型元素的定位与文档流无关,只基于带有定位属性(relativeabsolute)的元素或视窗;


    position的relative、absolute与fixed区别?

  这三个定位属性是属于层模型的三种体现形式,另外任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框(有块级元素特性,但不占整行),而不论该元素本身是什么类型。

  使用区别  

  relative 相对定位,以自己当前处于文档流的位置为基准设置偏移量,所以自身在文档流会保持占有固定的物理空间,并且物理空间的位置只受文档流的影响,而不受自身设置偏移量(top/left这些)影响,注意自身设置了margin这类非定位属性也一样改变其在文档流的物理位置。

  absolute 绝对定位,是相对于设置了position为relative或者absolute最近的父级元素定位(body、html标签也需要定位属性才能作为定位父级),如果没有就是基于视窗定位,不占文档流的物理空间。

  fixed 固定定位,是相对于浏览器视窗的,不占文档流的物理空间。


布局模型 之 层模型(position的relative、absolute与fixed区别?)

标签:absolute   fixed   relative   

原文地址:http://ycgit.blog.51cto.com/8590215/1958756

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