CSS position 屬性

時間 2019-12-07

標籤 css position 屬性欄目 CSS 简体版

原文原文鏈接

　　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」之一。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。