CSS3包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
层模型:
1、绝对定位(position: absolute):相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
2、相对定位(position: relative):首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
3、固定定位(position: fixed): 与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。
4、Relative与Absolute组合使用
父元素设置position:relative,子元素设置position:absolute,则 子元素相对于父元素定位,不再是相对于浏览器进行定位咯