相对定位:
相对定位是相对于初始位置的偏移，初始位置仍然处于文档流中，（所谓文档流是默认的布局方式,块级元素从上到下,行级元素从左到右）
对红色div相对定位后:
注意红色后面的白色，是初始位置，仍在文档流中
绝对定位:
无已定位祖先元素，以<html>为偏移参照基准,注意不是<body>
有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
如果未设置偏移量，无论是否存在已定位祖先元素，都保持在元素初始位置
绝对定位后，脱离文档流
所谓已定位祖先元素，例如：
<div id=”a” style=”position:relative(或者absolute)”>
<div id=”b”></div>
</div>
则a是b的已定位祖先元素 如果没有style的话只是祖先元素
对绿色绝对定位后（无已定位祖先元素）:
注意绿色已经脱离文档流，则蓝色直接紧挨红色，
一般会结合relative和absolute使用（祖先为relative）
主要应用：
如果使用absolute实现横向两列布局，一列固定宽度，一列自适应
Relative-父元素相对定位（无偏移量，保持初始位置不变）
Absolute-自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度的列（因为absolute定位后脱离文档流，这样就没有办法把父元素的高度给撑开，也就说如果自适应宽度的列的高度较高，则其会覆盖一点父元素下面的元素，如果固定的高，则自适应的肯定在父元素的范围内）
扫一扫
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
