文档流，是指盒子按照HTML标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，每个盒子都占据自己的位置。
2.关于定位
我们可以使用css的position属性来设置元素的定位类型，设置如下：
（1）relative生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
.box01{
background-color: yellow;
position: relative;
left: 50px;
}（2）absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相当于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
（3）fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
（4）static默认值，没有定位，元素出现在正常的文档流种，相当于取消定位属性或者不设置定位属性。
（5）inherit 从父元素继承position属性的值
3.定位元素的偏移
定位的元素还需要用left，right，top，bottom来设置相对于参照元素的偏移值。
代码
<head>
<meta charset="utf-8">
<title>定位例子</title>
<style type="text/css">
.con{ ???width: 80px; ???height: 80px; ???background-color: gold; ???margin: 50px auto; ???position: relative; ???border-radius: 14px;}.box{ ???width: 28px; ???height: 28px; ???background-color: red; ???text-align: center; ???line-height: 28px; ???position: absolute; ???left: 70px; ???top: -15px; ???border-radius: 14px;}</style></head>
<body>
<div class="con"> ???<div class="box">5</div></div></body>
代码2
<head>
<meta charset="utf-8">
<title>定位02</title>
<style type="text/css">
.meun{ ???width: 800px; ???height: 100px; ???position: fixed; ??????????????????/*fixed内容悬浮在浏览器上*/ ???top: 0px; ???left: 50%; ???margin-left: -400px; ???/*margin: 50px auto;*/ ???????????????background-color: gold;}p{ ???text-align: center;}.popup{ ???width: 500px; ???height: 300px; ???background-color: aqua; ???border: 1px solid #000000; ???position: fixed; ???left: 50%; ???margin-left: -250px; ???top: 50%; ???margin-top: -150px; ???z-index: 100;}.mask{ ???width: 100%; ???height: 100%; ???background-color: #000000; ???position: fixed; ???left: 0; ???top: 0; ???opacity: 0.5; ????????????????/*opacity透明度*/ ???z-index: 98;}.pupcon{ ???display: block; ??????????????/*调整display值隐藏或显示弹框*/}</style></head>
<body>
<div class="meun">菜单</div>
<div class="pupcon">
???<div class="popup"> ???<h2>标题</h2></div><div class="mask"></div></div></body>
4.background属性
是CSS应用较多且重要的一个属性，负责给盒子设置背景图片和背景颜色的，background是一个复合属性，
（1）background-color 设置背景颜色
（2）background-image 设置背景图片地址
（3）background-repeat 设置背景图片如何重复平铺
（4）background-position 设置背景图片的位置
（5）background-attachment 设置背景图片是固定还是随着页面滚动条滚动
推荐用法：background：#000 url(bgimage.gif) no-repeat left center fixed
代码
<head>
<meta charset="utf-8">
<title>背景图定位</title>
<style type="text/css">
.box,.box01{ ???width: 120px; ???height: 160px; ???border: 1px solid #000; ???background: url("image/夏8.png"); ???background-position: -150px -60px; ???position: absolute;}.box{ ???left: 100%;}.boxcon{ ???height: 162px; ???/*border: 1px solid #000;*/}.boxcon h1{ ???display: inline-block; ???position: absolute; ???left: 50%; ???margin-left: -80px; ???font-size: 50px; ???color: pink;}.box02{ ???width: 620px; ???height: 720px; ???border: 1px solid #000; ???background: url("image/夏8.png"); ???background-position: -580px -50px; ???position: absolute; ???left: 50%; ???margin-left: -250px;}body{ ???margin: 0px;}</style></head>
<body>
<div class="boxcon"> ???<h1>夏目友人帐</h1> ???<div class="box01"></div> ???<div class="box"></div></div><div class="box02"></div></body>
代码2
<head>
<meta charset="utf-8">
<title>雪碧图列表</title>
<style type="text/css">
.list{ ???list-style: none; ???width: 300px; ???height: 305px; ???margin: 50px auto; ???padding: 0; ???/*background-color: aqua;*/}.list li{ ???????????????????????????????/*类名越长，权重越高*/ ???height: 60px; ???border-bottom: 1px dotted #000; ???line-height: 60px; ?????????????????/*垂直居中*/ ???text-indent: 60px; ?????????????????/*首行缩进*/ ???background: url("/image/序号.png") no-repeat left 3px;}.list .sty02{ ?????????????????????????/*类的权重值高于标签*/ ???background-position: 0px -62px;}.list .sty03{ ?????????????????????????/*类的权重值高于标签*/ ???background-position: 0px -117px;}.list .sty04{ ?????????????????????????/*类的权重值高于标签*/ ???background-position: 0px -182px;}.list .sty05{ ?????????????????????????/*类的权重值高于标签*/ ???background-position: 0px -243px;}</style></head>
<body>
<ul class="list"> ???<li class="sty01">美国队长</li> ???<li class="sty02">惊奇队长</li> ???<li class="sty03">蝙蝠侠</li> ???<li class="sty04">海王</li> ???<li class="sty05">钢铁侠</li></ul></body>
CSS定位
原文地址：http://blog.51cto.com/13742773/2334071