position屬性之：static定位
static定位是HTML元素的默認(rèn)值，即沒有定位，元素出現(xiàn)在正常的流中，因此，這種定位就不會(huì)收到top，bottom,left,right的影響。
html代碼
<div class="wrap">
<div class="content">
</div>
</div>
css代碼
.wrap{width: 300px;height: 300px; background: red;}
.content{position: static; top:100px; width: 100px;height: 100px; background: blue;}
效果圖如下
結(jié)論：雖然設(shè)置了static以及top，但是元素仍然出現(xiàn)在正常的流中
position屬性之:fixed定位
fixed定位是指元素的位置相對(duì)于瀏覽器窗口是固定位置，即使窗口是滾動(dòng)的它也不會(huì)滾動(dòng)，且fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間，且它會(huì)和其他元素發(fā)生重疊。
html代碼如下：
<div class="content">
我是使用fix來定位的！！！所以我相對(duì)于瀏覽器窗口，一直不動(dòng)。
</div>
css代碼如下：
body{height:1500px; background: green; font-size: 30px; color:white;}
.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;}
結(jié)論：右下角的div永遠(yuǎn)不會(huì)動(dòng)，就像經(jīng)常彈出來的廣告
position屬性之:relative定位
相對(duì)定位元素的定位是相對(duì)它自己的正常位置的定位。
結(jié)論：即使相對(duì)元素的內(nèi)容移動(dòng)了，但是預(yù)留空間的元素仍然保存在正常流動(dòng)，也就是說相對(duì)移動(dòng)之后，不會(huì)對(duì)下面的其他元素造成影響
position屬性之:absolute定位
絕對(duì)定位的元素相對(duì)于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對(duì)于<html>。
例①
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對(duì)定位</title>
<style>
body{background:green;}
.parent{ width: 500px;height: 500px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
</body>
</html>
結(jié)論：只在span中設(shè)置了position:absolute；而在其父元素中都沒有，于是它的位置是相對(duì)于html的。
例②
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對(duì)定位</title>
<style>
body{background:green;}
.parent{ width: 500px;height: 500px;background: #ccc;}
.son{position: relative; width: 100px;height: 100px;background: #aaa; }
span{position: absolute; right: 30px; background: #888;}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
</body>
</html>
# 相較于上一個(gè)例子，我只修改了class為son的元素的css，設(shè)置為position：relative；
我們發(fā)現(xiàn)現(xiàn)在span的位置是相對(duì)于設(shè)有position屬性的class為son的父元素的。
例③
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對(duì)定位</title>
<style>
body{background:green;}
.parent{position: absolute; width: 300px;height: 300px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
</body>
</html>
#這個(gè)例子我只是修改了第一個(gè)例子中的css--設(shè)置了position:absolute；效果如下：
我們發(fā)現(xiàn)，現(xiàn)在span的定位是相對(duì)于具有position:absolute的屬性的class為parent的父元素。
例④
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對(duì)定位</title>
<style>
body{background:green;}
.parent{position:fixed; width: 300px;height: 300px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
</body>
</html>
相對(duì)于例1，我添加了fixed的position屬性，發(fā)現(xiàn)結(jié)果和例3是一模一樣的。
例⑤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對(duì)定位</title>
<style>
body{background:green;}
.parent{position:static; width: 300px;height: 300px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
</body>
</html>
相對(duì)于例1，我添加了static的position屬性（即html的默認(rèn)屬性），結(jié)果和例1是一樣的。
綜上所述，當(dāng)某個(gè)absolute定位元素的父元素具有position:relative/absolute/fixed時(shí)，定位元素都會(huì)依據(jù)父元素而定位，而父元素沒有設(shè)置position屬性或者設(shè)置了默認(rèn)屬性，那么定位屬性會(huì)依據(jù)html元素來定位。
