position 屬性有 4個值
static 舵抹、 relative 肪虎、 absolute 、fixed 惧蛹，默認(rèn)值為 static 扇救。只有將元素的 position 屬性設(shè)定為relative 、 absolute 或 fixed 香嗓，元素的 top 迅腔、 right 、 bottom 和 left 屬性才會起作用靠娱。
1钾挟、 靜態(tài)定位static
在靜態(tài)定位的情況下，每個元素在處在常規(guī)文檔流中饱岸。它們都是塊級元素，所以就會在頁面中自上而下地堆疊起來徽千。
2苫费、相對定位relative
相對的是它原來在文檔流中的位置（或者默認(rèn)位置），使用 top 双抽、 right 百框、bottom 和 left 屬性來改變它的位置，但多數(shù)情況下牍汹，只用 top 和 left 就可以實現(xiàn)我們想要的效果铐维。元素自己相對于原始位置挪動了一下之外柬泽，頁面沒有發(fā)生任何變化。換句話說嫁蛇，這個元素原來占據(jù)的空間沒有動锨并，其他
元素也沒動。
{
position:relative; top:25px; left:30px;
}
3睬棚、絕對定位absolute
絕對定位會把元素徹底從文檔流中拿出來第煮。絕對定位的元素完全脫離了常規(guī)文檔流，它現(xiàn)在是相對于頂級元素 body 在定位抑党。絕對定位元素默認(rèn)的定位上下文是 body 元素包警。所以在頁面滾動的時候，為了維護與 body元素的相對位置關(guān)系底靠，它也會相應(yīng)地移動害晦。
{
position:absolute; top:25px; left:30px;
}
4、固定定位fixed
從完全移出文檔流的角度說暑中，固定定位與絕對定位類似壹瘟。但不同之處在于，固定定位元素的定位上下文是視口（瀏覽器窗口或手持設(shè)備的屏幕）痒芝，因此它不會隨頁面滾動而移動俐筋。固定定位并不常用，最常見的情況是用它創(chuàng)建不隨頁面滾動而移動的導(dǎo)航元素严衬。
{
position:fixed; top:30px; left:20px;
}
5澄者、定位上下文
把元素的 position 屬性設(shè)定為 relative 、 absolute 或 fixed 后请琳，繼而可以使用 top 粱挡、right 、 bottom 和 left 屬性俄精，相對于另一個元素移動該元素的位置询筏。這里的“另一個元素”，就是該元素的定位上下文竖慧。
絕對定位元素默認(rèn)的定位上下文是 body 嫌套。這是因為body 是標(biāo)記中所有元素唯一的祖先元素。而實際上圾旨，絕對定位元素的任何祖先元素都可以成為它的定位上下文踱讨，只要你把相應(yīng)祖先元素的 position 設(shè)定為 relative 即可。
- html
<body>
<div id="outer">
<div id="inner">This is text...</div>
</div>
</body>
- css
div#outer {
position:relative;
width:250px;
margin:50px 40px;
border-top:3px solid red;
}
div#inner {
position:absolute;
tetop:10px;
left:20px;
background:#ccc;
}
