1 定位概述
CSS 定位 (Positioning) 属性允许你对元素进行定位
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
使用 display 属性改变生成的框的类型。将 display 属性设置为 block（块），可以让行内元素显示的像块级元素一样/*inline（内联） inline-block（内联块）*/
position（位置） 属性值的含义：
static/*静态*/ 元素框正常生成。
relative/*相对*/ 元素框偏移某个距离。
absolute/*绝对*/ 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。
fixed/*固定*/ 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身
2 相对定位
对一个元素进行相对定位，它将出现在它所在的位置上，通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动
div {
width: 200px;
height: 200px;
background-color: #766ac5;
position: relative;
top: 50px;
left: 30px
}
运行效果：
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
3 绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
div {
width: 200px;
height: 200px;
background-color: #766ac5;
position: absolute;
top: 50px;
left: 30px
}
运行效果：
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index 属性来控制这些框的堆放次序。
div {
width: 200px;
height: 200px;
background-color: #766ac5;
position: absolute;
top: 50px;
left: 30px；
z-index: -1
}
运行效果：
默认的 z-index 是 0。z-index -1 拥有更低的优先级。z-index 1 拥有更高的优先级。
4 浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
div {
width: 200px;
height: 200px;
background-color: #766ac5;
float: left
}
运行效果：
clear 属性规定元素的哪一侧不允许其他浮动元素。
div { clear: both } /*清除两侧浮动*/
5，固定定位
div {
width: 200px;
height: 200px;
background-color: #766ac5;
position: fixed;
top: 50px;
left: 30px
}
运行效果：
固定定位它的相对移动的坐标是视图（屏幕内的网页窗口）本身，不会随滑动条的滑动而改变所在视图中的位置
