CSS教程:position屬性

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS教程:position屬性

CSS教程:position屬性

編輯：CSS進階教程

position屬性可以讓你讓你隨意控制一個特定元素在浏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在浏覽器的左上角.即使出現滾動條他依然可以在浏覽器的左上角.posotion屬性有4個取值.由於static為默認的方式。所以實際上可用的值只有3個為了方便閱讀~
以下統稱為：固定(fixed)、相對(relative)、絕對(absolute).

第1：固定定位(fixed)

固定定位可以讓某一元素固定在屏幕的某個位置.其效果和背景的background-attachment:fixed屬性相似！但是IE6以及更早的版本不支持.所以以下例子請在非IE6以下浏覽器下浏覽

例子：

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="aslen" /> <meta name="Copyright" content="www.gongchang.com" /> <style> *{margin:0;padding:0} </style> </head> <body> <div style="position:fixed;height:50px;width:50px;background:#f00;left:50px;top:50px;"></div> <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 <br />換行 </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

第2：相對定位(relative)

相對定位是依據設置定位屬性的4個方向上的任意值來實現相對與其本來在文檔中正常顯示的位置的偏移；

當相對定位的元素偏移出其本來的文檔流的位置：其他元素仍然認為那個位置為其的邏輯文檔流區域.而不會去補上去，雖然我們感官上認為那裡是沒有東西的~

例子：

其中第2個色塊就是相對於其本來的文檔流中的位置依據left:10px;top:20px;的定位屬性值進行偏移.

其後面的第3個色塊依然認為前面的空白（就是第3的原本的文檔流的位置）為第3個色塊的文檔流區域則不會自動填充上去.

當相對定位的父元素出現滾動條時，IE浏覽器的特殊情況
例子：

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="aslen" /> <meta name="Copyright" content="www.gongchang.com" /> <style type="text/css"> *{padding:0;margin:0} </style> </head> <body> <div style="width:500px;height:150px;overflow:auto;"> 我是正常文檔流的文字 <div style="width:300px;background:#ff0000;height:20px;position:relative;">我是相對定位，拉動滾動條看我在那裡</div> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> 我是正常文檔流的文字<br /> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

當相對定位的父元素有滾動條的時候，該相對定位元素再IE的表現很詭異（其後面的元素依然認為那個位置為該元素的默認位置，而表現出相對定位的特性，但是拉動滾動條時，在FF下正常即相對定位的元素和文檔一起滾動，但是在IE系列裡面，相對定位的色塊依然在原地不動，此時元素的特性有點像絕對定位）

當相對定位同時擁有定位屬性的4個方向的值和margin屬性。相對定位的定位屬性 top right bottom left和margin-top margin-right margin-bottom margin-left;各個方向上一至的時候其值會產生疊加效果，而按照方向執行疊加後的數值的偏移

例子：

第3：絕對定位(absolute)

當元素設置絕對定位後.則會從正常的文檔流中脫離.其後面的元素會完全忽視這個絕對定位的元素.就好像正常文檔流中不存在這個元素一樣.然後根據離其最近的一個具有position屬性的父對象的邊緣為定位基點（如果沒有沒有這樣一個父對象那麼默認依據窗口元素定位），根據設置定位屬性的4個方向的值來實現絕對的定位布局.

例子：

我們可以看到.當色塊2設置絕對定位之後.後面的第3色塊忽視其存在，自動填補到正常的文檔流中（這個是根據窗口元素定位）

我們再來看一下IE中依據窗口元素定位的一個特殊情況
例子：

運行代碼框
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="aslen" /> <meta name="Copyright" content="www.gongchang.com" /> <style type="text/css"> html{background: #0099FF;padding:100px;} body{color:#FFFFFF;background:#FF00FF;padding:100px;width:400px;position:relative;} .wapper{background:#FF6600;} .abso {width:200px; height:200px; border:1px #000 solid; position:absolute;left:0px;top:0px;background:#00FF00} </style> </head> <body> <div class="wapper"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 此DEMO測試IE6的Quirks mode模式以及position定位參考的窗口元素 <div class="abso">絕對定位</div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

此DEMO與position:absolute的定位工作方式無關~只是作為IE中特殊的情況列出來

除了上面的基本的position:absolute特點，其還有下面幾點；

1.如果我們只設置了position:absolute而沒有設置定位屬性的4個方向值的話.那麼該絕對定位的元素依然遵循其在文檔流中的正常位置，它仍然受前一元素的文檔流位置影響，按照正常文檔流進行布局。只不過現在是從正常的文檔流中抽出.其後面的元素會忽視其存在.而自動補上去.因為絕對定位的元素是不占文檔流的布局空間的。

例子：

例子中第2個紅色的色塊就是一個只具有position:absolute屬性的元素，它仍然在正常的布局位置呈現，只不過後面的元素會忽視其存在

2.絕對定位會自動把一個元素轉化為塊元素

例子：

按照標准的渲染方式.行間元素設置的寬度和高度是被忽略的，但是當給元素絕對定位之後，該元素會具有塊元素的特性，而可以設置寬度和高度（雖然絕對定位的元素不占布局空間）

3.在IE下沒有設置定位屬性4個方向的值的絕對定位的塊元素的表現是inline-block 再FF下其是block

例子：

這個其實是浏覽器的差異，在FF下在塊元素擁有position:absolute屬性後，其依然作為一個塊元素，而相對於前面的文檔流而換行，所以為了統一，在這種使用情況下，可以加上display:inline即可保證各個浏覽器統一

4.絕對定位元素依據其定位基點進行絕對定位時會忽視其定位基點的padding空間

例子：

圖中的紅色區域是一個高度和寬度為500px且padding:100px;因為絕對定位元素忽視其定位基點的padding屬性，所以在頂部呈現

5.設置任何一個方向的定位屬性.該絕對元素除該方向按照定位屬性的值依據其具有position屬性最近的父元素為基點進行定位.其另外方向上的邏輯位置依然受前一文檔流中的元素影響.按照正常的位置進行布局：

例子：

我們可以看到圖中的紅色區域，除按照left:40這個屬性偏移40像素後，其垂直方向的位置依然為正常文檔流中的位置

6.當元素設置為絕對定位後改元素內的浮動會自動清除

例子：

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="aslen" /> <meta name="Copyright" content="www.gongchang.com" /> <style type="text/css"> *{padding:0;margin:0} li{float:left;width:500px;height:40px;background:fuchsia; list-style:none} </style> </head> <body> <ul style="border:1px blue solid;width:500px;padding:50px;background:green;position:absolute"> <li>我是浮動的元素</li> <li>我是浮動的元素</li> <li>我是浮動的元素</li> <li>我是浮動的元素</li> <li>我是浮動的元素</li> <li>我是浮動的元素</li> <li>我是浮動的元素</li> <li>我是浮動的元素</li> <li>我是浮動的元素</li> <li>我是浮動的元素</li> </ul> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

7.當絕對定位同時擁有定位屬性和margin屬性、絕對定位的的定位屬性 top right bottom left和margin-top margin-right margin-bottom margin-left;各個方向上一至的時候其值會產生疊加效果，而按照方向執行疊加後的數值的偏移

例子：

我們會發現這個紅色的色塊距離左邊200PX.left+margin-left

小結：

當元素同時擁有浮動和絕對定位時.絕對定位的優先權大於浮動.因為浮動受文檔的邏輯結構位置限制。而絕對定位不會。

所以當絕對定位脫離文檔流，絕對定位的元素不受浮動影響.即float:left會失效，

數學上我們知道.X軸上一個數值 Y軸上的一個數值即可確定一個點，感官上left right屬於x軸bottom top屬於Y軸。

我們完全可以設置一個無寬度和高度絕對定位的元素同時擁有top right bottom left來實現其根據其參考的定位基點的父元素的的大小來自適應大小.

但是IE6不支持.IE6只能識別left的值而忽視right.所以下面例子請在非IE6以及一下浏覽器浏覽

例子：

實際應用:（個人的習慣）

標題（“標題文字”和“更多”）（相對+絕對）
需要讓一些具有vertical-align:middle屬性的元素抽出文檔流（這個看具體情況，因為vertical-align:middle會影響文檔中的文字對齊）（絕對）
固定元素的浮動塊（該浮動塊內的元素布局固定可以用絕對定位，並設置該浮動塊為相對）(相對+絕對)

上一頁:認識浏覽器：Google Chrome 浏覽器
下一頁:淺談html和body標記應用CSS

CSS進階教程

黑客選擇CSS代碼掛馬 CSS掛馬攻防實錄: 網頁制作poluoluo文章簡介：隨著Web2.0的普及，各種網頁特效用得越來越多，這也給黑客一個可
HTML和CSS做網頁實例教程:鼠標滑過文字改變: 關於HTML+CSS的實例效果很多，下面舉出常用的幾列，供新手們學習參考。html+CSS實例效果(
用CSS實現網頁圖片的預加載: 網頁制作poluoluo文章簡介：Creating a CSS Image Preloader.

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

認識浏覽器：Mozilla項目 CSS實現元素相對於浏覽器窗口進行定位 50個強大璀璨的CSS3/JS技術運用實例 Div+CSS教程：如何閉合浮動元素？ CSS網頁布局使用表格可以嗎？破洛洛推薦值得一看的CSS框架 CSS網頁制作技巧:提高CSS可閱讀性 CSS的list-style解釋顯示/隱藏引出的CSS Bug CSS3實例教程:自適應的彈性布局

DIV CSS 佈局教程網

相關文章