在网页中，元素有三种布局模型：
流动模型（Flow）：网页默认布局模型
（1）块状元素在所处的包含元素内自上而下按顺序垂直延伸分布。因为块状元素默认的宽度为100%。实际上，块状元素都会以行的形式占据位置。
（2）内联元素在所处的包含元素内从左到右水平分布显示。浮动模型 (Float)
浮动模型的设计初衷是为了实现文字环绕效果。设置了浮动属性的元素会脱离文档流，沿其容器的左侧或右侧放置，文本和内联元素将围绕它。当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
浮动具有两大特性：- 包裹性：设置了浮动的元素其尺寸刚好容纳内容
- 破坏性：子级元素设置了浮动，父级元素不会被浮动元素撑起来。（父元素的高度塌陷。）
层模型（Layer）
层布局模型能够对网页元素进行精确定位。在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但层布局模型也有其方便之处。
CSS定义了定位属性（position）以支持层布局模型。可以理解为层模型有三种形式。
（1）绝对定位(position: absolute)
将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性（非static元素）的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。（脱离了文档流）
（2）相对定位(position: relative)
相对定位通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是：首先按照默认的流动模型（flow）确定元素位置，然后元素像层一样浮动起来相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，如果数值为百分比，其参照物为父元素的宽度尺寸。
偏移前的位置保留不动，即其它元素在确定位置的时候会认为该元素还在其偏移前的位置上，其他元素的定位不受相对定位元素偏移的影响。（相对定位未脱离文档流）
例如：#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:20px; top:50px; } </style> </head> <body> <div id="div1"></div> <span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span> </body>
虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
（3）固定定位(position: fixed)
固定定位与绝对定位类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置或改变浏览器窗口的显示大小。因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。position的另外两种取值：
（4）position：static
该关键字指定元素使用正常的布局行为，即元素在文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
（5）position：sticky
盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。可以实现类似表头固定的效果，参考MDN给的示例理解！！！敲黑板！！
在定位元素的父元素没有position属性的前提下，用absolute能相对于浏览器偏移；用relative能相对于本身偏移；用fixed能相对于视图偏移。如果希望实现div相对父元素偏移，则需要为父元素和定位元素同时指定position属性。
但是，http://www.imooc.com/code/3585 中为什么说父元素必须是relative定位属性呢？？
有待进一步探究！
扫一扫
1092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
