position 屬性有 4個(gè)值
static 、 relative 、 absolute 、fixed ，默認(rèn)值為 static 。只有將元素的 position 屬性設(shè)定為relative 、 absolute 或 fixed ，元素的 top 、 right 、 bottom 和 left 屬性才會(huì)起作用。
1、 靜態(tài)定位static
在靜態(tài)定位的情況下，每個(gè)元素在處在常規(guī)文檔流中。它們都是塊級(jí)元素，所以就會(huì)在頁(yè)面中自上而下地堆疊起來(lái)。
2、相對(duì)定位relative
相對(duì)的是它原來(lái)在文檔流中的位置（或者默認(rèn)位置），使用 top 、 right 、bottom 和 left 屬性來(lái)改變它的位置，但多數(shù)情況下，只用 top 和 left 就可以實(shí)現(xiàn)我們想要的效果。元素自己相對(duì)于原始位置挪動(dòng)了一下之外，頁(yè)面沒(méi)有發(fā)生任何變化。換句話說(shuō)，這個(gè)元素原來(lái)占據(jù)的空間沒(méi)有動(dòng)，其他
元素也沒(méi)動(dòng)。
{
position:relative; top:25px; left:30px;
}
3、絕對(duì)定位absolute
絕對(duì)定位會(huì)把元素徹底從文檔流中拿出來(lái)。絕對(duì)定位的元素完全脫離了常規(guī)文檔流，它現(xiàn)在是相對(duì)于頂級(jí)元素 body 在定位。絕對(duì)定位元素默認(rèn)的定位上下文是 body 元素。所以在頁(yè)面滾動(dòng)的時(shí)候，為了維護(hù)與 body元素的相對(duì)位置關(guān)系，它也會(huì)相應(yīng)地移動(dòng)。
{
position:absolute; top:25px; left:30px;
}
4、固定定位fixed
從完全移出文檔流的角度說(shuō)，固定定位與絕對(duì)定位類似。但不同之處在于，固定定位元素的定位上下文是視口（瀏覽器窗口或手持設(shè)備的屏幕），因此它不會(huì)隨頁(yè)面滾動(dòng)而移動(dòng)。固定定位并不常用，最常見(jiàn)的情況是用它創(chuàng)建不隨頁(yè)面滾動(dòng)而移動(dòng)的導(dǎo)航元素。
{
position:fixed; top:30px; left:20px;
}
5、定位上下文
把元素的 position 屬性設(shè)定為 relative 、 absolute 或 fixed 后，繼而可以使用 top 、right 、 bottom 和 left 屬性，相對(duì)于另一個(gè)元素移動(dòng)該元素的位置。這里的“另一個(gè)元素”，就是該元素的定位上下文。
絕對(duì)定位元素默認(rèn)的定位上下文是 body 。這是因?yàn)閎ody 是標(biāo)記中所有元素唯一的祖先元素。而實(shí)際上，絕對(duì)定位元素的任何祖先元素都可以成為它的定位上下文，只要你把相應(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;
}
