position 屬性規定元素的定位類型,把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。css
這個屬性定義創建元素佈局所用的定位機制。任何元素均可以定位,不過絕對或固定元素會生成一個塊級框,而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。html
支持這個屬性的瀏覽器有:IE、Firefox Chrome Safari Opera,全部主流瀏覽器都支持 position 屬性。瀏覽器
position的值:有absolute(絕對定位)、relative(相對定位)、static(靜態定位,默認值)、fixed(固定定位)、inherit(繼承父元素定位)五種。佈局
inherit 規定應該從父元素繼承 position 屬性的值。spa
static:默認。位置設置爲 static 的元素,它始終會處於頁面流給予的位置(static 元素會忽略任何 top、bottom、left 或 right 聲明)。
relative:位置被設置爲 relative 的元素,可將其移至相對於其正常位置的地方,所以 "left:20" 會將元素移至元素正常位置左邊 20 個像素的位置。
absolute:位置設置爲 absolute 的元素,可定位於相對於包含它的元素的指定座標。此元素的位置可經過 "left"、"top"、"right" 以及 "bottom" 屬性來規定。
fixed:位置被設置爲 fixed 的元素,可定位於相對於瀏覽器窗口的指定座標。此元素的位置可經過 "left"、"top"、"right" 以及"bottom" 屬性來規定。不論窗口滾動與否,元素都會留在那個位置。工做於 IE7(strict 模式)。
一、relative 相對定位的應用
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>這是位於正常位置的標題</h2>
<h2 class="pos_left">這個標題相對於其正常位置向左移動</h2>
<h2 class="pos_right">這個標題相對於其正常位置向右移動</h2>
<p>相對定位會按照元素的原始位置對該元素進行移動。</p>
<p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。</p>
<p>樣式 "left:20px" 向元素的原始左側位置增長 20 像素。</p>
</body>
</html>
二、absolute絕對定位的應用
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標題</h2>
<p>經過絕對定位,元素能夠放置到頁面上的任何位置。下面的標題距離頁面左側 100px,距離頁面頂部 150px。</p>
</body>
</html>
三、fixed固定定位的應用
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
四、inherit
這個樣式表示從父元素繼承頂部內邊距的值,inherit就是繼承父元素的意思。例如一個div的padding-top:10px; 若是它裏面還包含了一個p,這個p的padding-top:inherit; 那就至關於這個p的padding-top:10px;
注意:position有層級關係 須要z-index來解決z-index :-1;值越大,就會出如今越接近頂層的位置,此外,還可使用負數(IE7以前不支持負數)。關於多個元素堆疊這個問題,除了設置了position爲relative或absolute會激活z-index以外,還有一種特殊狀況,並未激活z-index,但仍然讓元素髮生了重疊,這就是:負邊距。給元素設置「z-index」屬性,首先要在這個元素上設置了「position」屬性值爲「relatvie」、「absolute」或者「fixed」之一。