css定位机制总结
这段时间学CSS，常常被元素的文档位置搞得一脸蒙蔽，在此总结下CSS的定位机制。
CSS的三种基本定位方式：普通流、浮动、绝对定位
在讲定位之前，首先提下定位的思想，定位，顾名思义，元素的位置，在物理学中，一切物体的位置都是相对的。元素定位也是如此，元素位置是元素位置框相对于其他元素、浏览器窗口的位置。
首先了解一下一些基本的概念：
元素框属性，div,p,h1等元素是块级元素，span,strong等元素是行内元素。
常用的display属性来定义元素框类型：
- block 块级元素
- inline 内联元素
- inline-block 行内块元素
块级元素显示时都独占一行，可编辑宽高。内联元素显示时和其他内联元素同在一行，不能编辑宽高。行内块元素则是两者结合，在需要编辑宽高但又跟别的元素同在一行时使用。
position属性定义元素框生成方式：
- static
- relative
- absolute
- fixed
1.普通流
即正常情况，元素在html文件中位置决定。普通流是没有脱离文档流的。
相对定位：相对定位元素没有脱离文档流，只是相对于元素正常的位置的偏移，元素原来的空间仍然保留。
2.绝对定位
绝对定位会脱离文档流，也就是说元素在原来html的空间完全关闭，相当于没有这一个元素。绝对定位元素会相对于已经定位的祖先元素定位，如果没有已定位的祖先元素，则相对最初的包含快。这里的已经定位指不管是absolute,还是relative都可以作为其已经定位的祖先元素。如果没有，则以body元素作为祖先元素。
<style type="text/css">
.grandfather{
position: relative;
left: 10px;
top: 10px;
background-color: yellow;
width: 300px;
height: 300px;
}
.father{
margin-left: 50px;
width: 200px;
height: 200px;
background: red;
}
</style>
<body>
<div class="grandfather">
<div class="father">
<div style="position:absolute;left:0px;top:0px;">hello world</div>
</div>
</div>
</body>
结果：
3.浮动
浮动框是脱离普通文档流的，直到碰到包含框或另一个浮动框的边框为止。css通过浮动属性float来实现元素浮动。
<style type="text/css">
.granfather{
width: 100px;
height: 100px;
background-color: red;
}
.father{
width: 100px;
height: 100px;
background-color: yellow;
}
.son{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div class="granfather"></div>
<div class="father"></div>
<div class="son"></div>
1.加了浮动之后 ，元素纷纷向左浮动，直到碰到另一个浮动框。
.granfather{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.father{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.son{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
2. 如果没有其他浮动元素框，会浮动碰到它的包含框为止，会覆盖文档流别的元素。如下，红色框脱离文档流向左浮动，这时候就会覆盖在黄色框上面。
<style type="text/css">
.granfather{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.father{
width: 150px;
height: 150px;
background-color: yellow;
}
.son{
width: 150px;
height: 150px;
background-color: green;
}
</style>
<body>
<div class="granfather"></div>
<div class="father"></div>
<div class="son"></div>
