引言：
咱在前端这方面算一个半吊子，后端的php+mysql也不咋地（所以说，还是一个小菜鸡~~~），最近想提升一下css样式（原生php博客布局太乱啦QAQ~），发现一个挺
好的文章对定位的基础提升和加深理解挺有帮助，于是便想搬运过来，以供参考，在此放上原文链接(哥哥点我~~~)。。。
感觉搬运以后文章内容是挺多的，选着看吧
一：DOM脱离文档流
什么是文档流
指语言文本从左到右，从上到下显示，这是传统HTML文档的文本布局。
脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
什么情况下会脱离文档流
浮动(float)、绝对定位(absolute)、固定定位(fixed)三种方式定位会脱离文档流。
1：浮动
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文
本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。
特点：
- 浮动元素会生成一个块级框，而不论它本身是何种元素
- 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄
- 没有实际高度,浮动会导致父元素高度坍塌
需要注意：
向左浮动，方块从右往左滑过来，如果某一行空间不够（基于父容器的宽度），那么这个块会沿着最右边的块的下边沿水平划过来，最后看卡到哪里就停止。
left4在第一行left3后面宽度不够，换行成第二行。在left2后面宽度不够，只能在left1后面。right1自然是从第二行开始查找位置，很幸运第
二行现在唯一的元素#left4右面空间足够，放置即可。right2在第二行中没有足够的位置，换行成第三行，找到空余位置插入。
2：定位
absolute的基准元素是 static 定位以外的第一个父元素，而fix的基准元素是浏览器窗口。position的值为absolute、fixed的元素脱离文
档流，static、relative没有脱离文档流。
absolute定位结果
分两种情况来考虑：
第一种：元素的某条边没有设置定位属性（left/top/right/bottom）
这个时候，这一边就会将absolute块（包括外边距）按流式布局（正常布局）来排列，当然这个流式布局就会受到内边距padding的影响了。
以下是demo：最好实际操作一下，这个图在原链接里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<script type="text/javascript" src='jquery-1.9.1.js'></script>-->
<style>
*{
margin: 0;
padding: 0;
text-align: right;
color: #FFF;
}
#container{
position: absolute;
left: 20px;
margin-top: 10px;
width: 600px;
height: 600px;
background-color: green;
}
#big{
position: relative;
left: 20px;
margin-top: 40px;
width: 300px;
height: 300px;
background-color: #000;
}
#normal{
position: static;
margin-left: 20px;
margin-top: 50px;
width: 200px;
height: 200px;
background-color: #aaa;
}
#middle{
position: absolute;
margin-left:0px;
margin-top:20px;
width: 100px;
height: 100px;
background-color: #333;
}
</style>
</head>
<body>
<div id="container">
<div id="big">
<div id="normal">
<div id="middle">
middle</div>normal
</div>big
</div> container
</div>
</div>
</body>
</html>
第二种，元素的某条边设置了定位属性（left/top/right/bottom）
这时候，这一边就会被作为脱离文档流的边来处理，会相对于 static 定位以外的第一个父元素（的边框）进行（big）定位，如果这时候设置了
外边距，那么这一边相对于基准元素的偏移=定位值（left/top/right/bottom）+ 外边距。
在原有的代码id = middle 上加上 left ：0
对于浮动与定位的位置优先级：
(fixed == absolute) > float > relative > static
理解为同时设置了position:absolute和float:right忽略float:right
补充：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
堆叠优先级：
1. 定位元素z-index>=0时为(fixed == absolute == relative) > static，z-index < 0时(fixed == absolute == relative) < static。
理解为兄弟元素一个设置了position：relative,另一个设置了position:static，当relative元素z-index为>=0时，无论static元素设置多少
都在relative下面。如果relative设置z-index<0,则论static取什么值relative都会在static下面。
2. 定位元素z-index>=0时(fixed == absolute == relative) > float，z-index < 0时(fixed == absolute == relative) < float。
理解为兄弟元素一个设置了position：relative,另一个设置了float:left，当relative元素z-index为>=0时，无论float元素设置多少都在relative下
面。如果relative设置z-index<0,则无论float的z-index设置多少relative都会在float下面。
3. float > static始终成立。因为z-index只有在定位元素上才起作用，定位元素包括fixed、absolute、relative。
4. fixed == absolute == relative，比较堆叠顺序直接比较z-index大小即可。
垂直边距合并
什么是垂直边距合并
当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
什么情况下会发垂直边距合并
1. 只针对块级元素
2. 正常文档流
注意：合并行为只适用于外边距，如果元素有内边距和边框，它们绝对不会合并。
计算方法【待研究确认！】：
// 相对方向
一个正一个负：正边距减去这个负边距绝对值
两个负数： 取绝对值较大的负数。-30px与-20px折叠，折叠后为-30px。
// 相同方向
绝对值最大的那个值
情况1:同一层级垂直方向上盒子的相遇
情况2：存在嵌套关系
父子节点都是没有脱离文档的两种定位（static、relative）的外边距（margin）会合并，显示效果以最大的那个外边距为准：父元
素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的
麻烦。没有给父元素设置内边距或者有效的边框的情况下：
建议亲自尝试：
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#outer {
width:300px;
height:300px;
background-color:red;
margin-top:20px;
}
#inner {
width:50px;
height:50px;
background-color:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>
<p>为父元素例子中的middle元素增加一个border-top或者padding-top即可</p>
</body>
</html>
边距合并实际例子：
结果：normal和big都没有脱离文档流，发生嵌套时，最终确认上边距为50px.
解决方案：在包含块上设置边框或者内边距，会使其子元素的外边距包含在包含块内。
情况3.外边距与自身发生合并
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。