標籤：
position 屬性規定元素的定位類型，把元素放置到一個靜態、相對的、絕對的、或固定的位置中。
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會產生一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的預設位置位移。
支援這個屬性的瀏覽器有：IE、Firefox Chrome Safari Opera,所有主流瀏覽器都支援 position 屬性。
position的值：有absolute（絕對位置）、relative（相對定位）、static（靜態定位，預設值）、fixed（固定定位）、inherit（繼承父元素定位）五種。
inherit 規定應該從父元素繼承 position 屬性的值。
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 模式）。
1、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>
2、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>
3、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>
4、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”之一。
CSS position 屬性
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
