CSS2.1规定了3种定位方案
1.Normal flow：普通流(相对定位 position relative、静态定位 position static)
普通流（normal flow，国内有人翻译为文档流）：普通流默认是静态定位，将窗体自上而下分成一行一行,块级元素从上至下、 行内元素在每行中按从左至右的挨次排放元素,即为文档流。
2.Float:浮动流
浮动流：元素的浮动，即可以让一个元素脱离原来的文档流，漂到另一个地方，漂到左边或右边等等。
3.Absolute position：绝对定位
绝对定位：就是直接将元素的位置写清楚，距离它的外层元素的左边、右边等多少距离。
第一部分、普通流Normal Flow演示：
代码：
CSS_Position.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="descripition" conent="this is an example">
<meta name="keywords" conent="html,css"> <link rel="stylesheet" style="text/css" href="CSS_Position.css"> <title> CSS的定位和浮动</title> </head>
<body>
<div class="div1">
</div> <div class="div2">
</div> <div class="div3">
</div>
</body>
</html>
CSS_Position.css：静态定位 <position static 从上到下>
.div1{
width: 200px;
height: 200px;
background-color: green;
display: block;/*默认块换行模式,可以不用写*/
}
.div2{
width: 200px;
height: 200px;
background-color: red;
display: block;/*默认块换行模式,可以不用写*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
display: block;/*默认块换行模式,可以不用写*/
}
效果图：
CSS_Position.css：静态定位 <position static 从左到右>
.div1{
width: 200px;
height: 200px;
background-color: green;
display: inline-block;/*先不换行,从左往右排列*/
}
.div2{
width: 200px;
height: 200px;
background-color: red;
display: inline-block;/*先不换行,从左往右排列*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
display: inline-block;/*先不换行,从左往右排列*/
}
效果图：
CSS_Position.css:相对定位 <position relative>
.div1{
width: 200px;
height: 200px;
background-color: green;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
top: -10px;/*距离顶部上移动10像素*/
left: 20px;/*距离左边移动20像素*/
position: relative;/*此时是相对定位，如果换成静态定位static，那么设置的top,left等是没有任何作用的*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
}
效果图：
第二部分、Float 浮动流演示：
CSS_Position.css：浮动一个元素
.div1{
width: 200px;
height: 200px;
background-color: green;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
float: right; /*div2块浮动到网页的右边*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
}
效果图：
CSS_Position.css：三个元素全部浮动
.div1{
width: 200px;
height: 200px;
background-color: green;
float: left;/*div1块浮动到网页的左边*/
}
.div2{
width: 200px;
height: 200px;
background-color: red;
float: left;/*div2块浮动到网页的左边*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
float: left;/*div3块浮动到网页的左边*/
}
效果图：
CSS_Position.css：清除浮动元素
.div1{
width: 200px;
height: 200px;
background-color: green;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
float: right;/*div2块浮动到右边*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
clear: right;/*清除div3右边的浮动，当然也可以左边left、两边both*/
}
效果图：
第三部分、Absolute position绝对定位演示：
CSS_Position.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="descripition" conent="this is an example">
<meta name="keywords" conent="html,css"> <link rel="stylesheet" style="text/css" href="CSS_Position.css"> <title> CSS的定位和浮动</title> </head>
<body>
<div class="div1">
</div> <div class="div2">
</div> <div class="div3">
<div class="mylabel">
</div>
</div>
</body>
</html>
CSS_Position.css: mylabel的默认位置
.div1{
width: 200px;
height: 200px;
background-color: green;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.mylabel{
width: 40px;
height: 40px;
background-color: yellow;
}
效果图：
CSS_Position.css：绝对定位、使用绝对定位改变mylabel的位置，使mylabel距离外层顶部-10px，距离外层右边10px：
.div1{
width: 200px;
height: 200px;
background-color: green;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.mylabel{
width: 40px;
height: 40px;
background-color: yellow;
position: absolute;
top: -10px;
right: 10px;
}
效果图：
