資訊專欄INFORMATION COLUMN
摘要：屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。元素將會脫離正常的文檔流，所以其周圍的元素將會忽略它的存在。此時，我們可以使用等屬性對元素進行絕對定位。一般情況下定義兩個屬性，或或。
postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值：
position: absolute
position: relative
position: fixed
position: static
position: inherit
本文主要詳細討論 position 屬性的前三個值，首先大概講解下后兩個值：
staticstatic 為 position 屬性的默認值，static 元素會遵循正常的文檔流，且會忽略 top,bottom,left,right 等屬性。
inheritinherit 值如同其他 css 屬性的 inherit 值，即繼承父元素的 position 值。
absoluteabsolute 元素將會脫離正常的文檔流，所以 其周圍的元素將會忽略它的存在。如同 absolute 元素的 display 屬性被設(shè)為了 none 一樣。此時，我們可以使用 top,bottom,left,right 等屬性對 absolute 元素進行絕對定位。一般情況下定義兩個屬性，top 或 bottom,left 或 right。
這個絕對定位需要稍微理解下，因為這里容易與 relative 產(chǎn)生混淆。
例如，當對 absolute 元素添加 left:10px 定位后，這個 left 究竟是對哪個元素而言呢？其實，此時將會往上查找 absolute 元素的第一個父元素，如果該父元素的 position 值存在（且不為 static）,那么這個 left:10px 就是根據(jù)該父元素進行的定位，否則將會繼續(xù)查找該父元素的父元素，一直追溯到某個父元素具備不為 static 的 position 值為止，如果不存在滿足條件的父元素，則會根據(jù)最外層的 window 進行定位。
Im an absolute elementIm a default element
//直接忽略 absolute 元素的存在
relativerelative 元素遵循正常的文檔流，所以周圍元素不會忽略它的存在，relative 元素同樣支持 top,bottom,left,right 等屬性。當我們使用 top,bottom,left,right等屬性對 relative 元素進行相對定位時的效果有點類似于 margin 屬性達到的效果，但是區(qū)別在于， relative 元素周圍的元素將會忽略 relative 元素的移動。我們注意，當 relative 元素未使用定位屬性進行相對定位時，它不會被周圍的元素忽略，但利用定位屬性進行定位后，周圍的元素會忽略 relative 元素的移動，它們會認為 relative 元素仍然在原來的位置，并未進行移動，我們用個例子來說明：
Im a relative elementIm a default element
//并未忽略 relative 元素的存在
Im a relative elementIm a default element
//忽略了 relative 元素的移動
fixedfixed 元素將會脫離正常的文檔流，所以它與 absolute 元素很相似，同樣會被周圍元素忽略，支持 top,bottom,left,right 屬性，但兩者仍有很大不同。
首先，fixed 元素定位與它的父元素無任何關(guān)系，它永遠是相對最外層的 window 進行定位的。
第二，fixed 元素正如它的名字一樣，它是固定在屏幕的某個位置，它不會因為屏幕的滾動而消失。
Im an absolute elementIm a fixed elementIm a default element
//如同 absolute，fixed元素也被周圍元素忽略
因為外層 div 高度超過一屏，所以現(xiàn)在我們往下滾動屏幕。
//只有 fixed 元素未因為屏幕滾動而消失，因為它是“固定”的
z-index為什么要在這里提到 z-index 屬性呢？那是因為 z-index 屬性只對定位元素有效，即 position 值為 absolute,relative,fixed 時才有效。我們首先了解下什么叫 z-index。
從上圖我們不難發(fā)現(xiàn) z-index 值代表的是元素的堆疊順序，值越高則顯示順序越優(yōu)先。
Im an absolute elementIm a fixed element
//fixed 元素 z-index 比 absoulute 元素高，所以顯示在前面
（我把背景色調(diào)為非透明，這樣可以看得更清楚），假如 z-index 值相同會出現(xiàn)什么情況呢？
Im an absolute elementIm a fixed element
//z-index 值相同，仍然顯示為 fixed 元素
所以我們知道，當 z-index 值相同時，后加載的元素顯示優(yōu)先。
參考http://www.vanseodesign.com/css/css-positioning/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/49475.html
摘要：三生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關(guān)，因此不占據(jù)空間，可能會和其他元素發(fā)生重疊。，元素脫離文檔流，相對于以外的第一個父元素定位。 一. CSS position 屬性介紹 CSS中position屬性指定一個元素（靜態(tài)的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed...
摘要：三生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關(guān)，因此不占據(jù)空間，可能會和其他元素發(fā)生重疊。，元素脫離文檔流，相對于以外的第一個父元素定位。 一. CSS position 屬性介紹 CSS中position屬性指定一個元素（靜態(tài)的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed...
摘要：相對于其最近的一個定位設(shè)置的父對象進行絕對定位，可用。代碼基本語法默認值，無特殊定位。代碼相對定位相對定位生成相對定位的元素，相對于其它位置進行定位。結(jié)語結(jié)語帶你走進定位詳解，多試試，熟能生巧嘛 學習CSS相關(guān)知識，定位是其中的重點，也是難點之一，如果不了解css定位有時候都不知道怎么用，下面整理了一下關(guān)于定位屬性的具體理解和應(yīng)用方案。 一：定位 定位屬性列表 position top...
簡述 定位問題一直是新手學習css的一個難點，現(xiàn)在我將他們總結(jié)出來，希望對大家有幫助 position詳解 在css中，通過position屬性，配合top,right,left,buttom對元素進行定位position屬性有：static，relative，absolute，fixed四種，下面分別探討 默認定位static Document ...
摘要：，這一句是刪除的縮進，這樣做可以使所有的列表內(nèi)容都不縮進。中的與樣式詳解和列表是使用布局頁面時常用的元素。這里是列表內(nèi)容這里是列表內(nèi)容四屬性屬性是綜合設(shè)置樣式的屬性，也是一個可以繼承的屬性，語法結(jié)構(gòu)如下各個值的位置可以交換。代碼如下: ??首頁??博客??設(shè)計??相冊??論壇??關(guān)于??? CSS:? 復(fù)制代碼 代碼如下: #menu ul {list-style:none;margi...
摘要：屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。元素將會脫離正常的文檔流，所以其周圍的元素將會忽略它的存在。此時，我們可以使用等屬性對元素進行絕對定位。一般情況下定義兩個屬性，或或。 postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值： position: absolute position: relative position...
閱讀 1487·2021-11-24 11:16
閱讀 2689·2021-07-28 12:32
閱讀 2302·2019-08-30 11:22
閱讀 1440·2019-08-30 11:01
閱讀 595·2019-08-29 16:24
閱讀 3547·2019-08-29 12:52
閱讀 1625·2019-08-29 12:15
閱讀 1332·2019-08-29 11:18
