position定位分为了几个重要的属性，分别是绝对定位(absolute)、相对定位(relative)、固定定位(fixed)、static定位(static)
首先先放一段未进行定位的元素的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: rosybrown;
}
.div2{
width: 200px;
height: 200px;
background-color: coral;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
运行效果图：
根据以上的效果图可以看出来，我们在页面中放置了两个DIV，并且设置了它的宽度高度还有颜色。这是正常情况下，DIV标签是行级元素，所以每一个DIV都占用了一行位置。
以上的效果是一个初始的效果，我们将在初始效果上进行改动并作对比。
static
static定位其实是一个默认值，如果将position设置为static那么该元素将不会被特殊的定位。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: rosybrown;
}
.div2{
width: 200px;
height: 200px;
background-color: coral;
position: static;
top: 300px;
left: 200px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
效果图：
以上的代码为div2添加了static定位并且设置了它的top值和left值，但是并没有什么卵用。
absolute
absolute是绝对定位，一旦设置了该属性，被设置的元素将从文档流中脱离出来。
并且absolute分为了两种方式进行绝对定位，如果说被绝对定位的元素存在父节点但是父节点未设置其他的position，那么该方式将以body为基准进行定位。以下代码就是该方式。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: rosybrown;
position: absolute;
}
.div2{
width: 200px;
height: 200px;
background-color: coral;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
效果图：
效果图中目前只能看到div1元素，因为div1被设置了absolute元素脱离的文档流，所以div2元素往上移动到了之前的div1的位置。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 50px;
height: 50px;
background-color: rosybrown;
position: absolute;
top: 0px;
}
.div2{
width: 200px;
height: 200px;
background-color: coral;
}
</style>
</head>
<body>
<div class="div2">
div2
<div class="div1">div1</div>
</div>
</body>
</html>
以上代码，是为了验证当被absolute绝对定位的元素div1并且存在没有设置定位的父元素后，absolute是基于body进行定位。我在代码中将top为值设置为了0px，div1元素是被定位到了body的0px的位置。
然后我们在实验另外一种情况，如果它存在父节点并且父节点也设定了position，则它的定位将不依照body进行定位，而是按照父节点的位置进行定位。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 50px;
height: 50px;
background-color: rosybrown;
position: absolute;
top: 0px;
}
.div2{
width: 200px;
height: 200px;
background-color: coral;
position: relative;
}
</style>
</head>
<body>
<div class="div2">
div2
<div class="div1">div1</div>
</div>
</body>
</html>
效果图：
这里就可以看到效果了，我给div1元素的父节点div2节点，设置了定位之后div1元素的定位是基于它的父节点来进行定位，如果父节点移动的话，那么div1也会跟着父节点div2进行移动。
relative
相对定位属性relative，在不添加额外的属性(top,left,…)与static定位是类似的。在一个定位为relative的元素上设置额外的属性该元素将会脱离正常的位置，但不会脱离文档流。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 50px;
height: 50px;
background-color: rosybrown;
}
.div2{
width: 200px;
height: 200px;
background-color: coral;
position: relative;
top: 300px;
}
</style>
</head>
<body>
<div class="div2">
div2
</div>
<div class="div1">div1</div>
</body>
</html>
效果图：
可以看到该元素的定位并不会影响其他元素的位置，它其实也就是根据自己初始化的位置进行相对定位。
fixed
固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 50px;
height: 50px;
background-color: rosybrown;
position: fixed;
bottom: 0px;
}
.div2{
width: 200px;
height: 200px;
background-color: coral;
}
</style>
</head>
<body>
<div class="div2">
div2
</div>
<div class="div1">div1</div>
</body>
</html>
效果图
为div1元素设定了固定定位之后，他将脱离文档流，不管文档有没有滚动，他都会在最底部。
以上说的就是CSS布局中的定位属性。熟练运用可搞出更复杂了页面布局。