position属性有4种不同类型的定位，分别是static、relative、absolute和fixed。
static:元素正常生成，块级元素作为文档流的一部分，从上到下依次排列，行内元素对应生成一个或者多个行框。这是一种正常的情况，不再赘述。
relative:元素的形状保持不变，位置会相对于其起点，做一定的偏移。
<html>
<head>
<style type="text/css">
h2.pos_relative
{
position:relative;
left:20px;
top:20px
}
</style>
</head>
<body>
<h2>正常位置的标题</h2>
<h2 class="pos_relative">这个标题相对于其正常位置向右移动20px,向下移动20px</h2>
</body>
</html>"left:20px",元素的左侧相对于其原始位置增加20px;"top:20px",元素的顶部相对于其原始位置增加20px;
效果如下：
absolute:元素的位置相对于最近的已定位的父元素进行定位，元素不占据文档流中的空间，可以覆盖界面上的其他元素，可以通过z-index属性来控制元素的显示次序。
<html>
<head>
<style type="text/css">
h2.pos_absolute
{
position:absolute;
left:50px;
top:50px
}
</style>
</head>
<body>
<h2>这是正常的标题</h2>
<h2 class="pos_absolute">这是带有绝对定位的标题</h2>
</body>
</html>"left:50px",元素的左侧相对于其父元素body增加50px;"top:50px",元素的顶部相对于其父元素body增加50px;
效果如下：
fixed:元素的位置相对于其视窗进行定位，而不是相对于最近的已定位的父元素，这一点与absolute不同。
<html>
<head>
<style type="text/css">
h2.one
{
position:fixed;
left:20px;
top:10px;
}
h2.two
{
position:fixed;
top:30px;
right:50px;
}
</style>
</head>
<body>
<h2 class="one">相对于视窗左侧增加20px,相对于视窗顶部增加10px</h2>
<h2 class="two">相对于视窗右侧增加50px,相对于视窗顶部增加20px</h2>
</body>
</html>效果如下：
