CSS文檔定位指南：static、relative、absolute、fixed、sticky詳解
CSS中position屬性用于指定元素的定位方法的類型（static、relative、absolute、fixed、sticky）。
靜態(tài)定位position:static此屬性未HTML元素默認(rèn)定位，一個(gè)元素沒有以任何特殊的方式定位，它總是按照頁面的正常流程定位。
在此屬性下，屬性值top、left、right、bottom和z-index對(duì)HTML元素沒有影響。
<divclass="parent"><divclass="child"></div></div><divclass="sibling"></div><styletype="text/css">.parent{width:480px;height:320px;background-color:#008800;}.child{width:240px;height:160px;background-color:#ff0000;}.sibling{width:240px;height:160px;background-color:#0000ff;}</style>效果如圖：
為什么使用它呢？將元素設(shè)置為position:static的唯一原因是強(qiáng)制刪除應(yīng)用于無法控制的元素上的某些定位。
相對(duì)定位position:relative此屬性相對(duì)于其正常位置的，在不改變布局的情況下根據(jù)元素的當(dāng)前位置定位元素。
position:relative相對(duì)于它的當(dāng)前位置放置一個(gè)元素而不改變它周圍的布局。
在此屬性下，設(shè)置相對(duì)定位元素的top、right、bottom和left屬性會(huì)導(dǎo)致它被調(diào)整到遠(yuǎn)離其正常位置。
<divclass="parent"><divclass="child"></div></div><divclass="sibling"></div><styletype="text/css">.parent{position:relative;width:480px;height:320px;background-color:#008800;z-index:5;left:50px;top:50px;}.child{width:240px;height:160px;background-color:#ff0000;}.sibling{width:240px;height:160px;background-color:#0000ff;}</style>效果如圖：
為什么要使用它？此屬性下引入了在該元素上使用z-index的能力，這對(duì)于靜態(tài)定位position:static的元素并不真正起作用。
絕對(duì)定位position:absolute此屬性是相對(duì)于最近父級(jí)元素的位置，如果絕對(duì)定位元素沒有定位的父級(jí)元素，它將使用文檔body并隨著頁面滾動(dòng)而移動(dòng)。position:absolute相對(duì)于其父元素的位置放置一個(gè)元素并改變它周圍的布局。
關(guān)于絕對(duì)定位的權(quán)衡是，這些元素將從頁面的元素流中刪除，具有這種定位類型的元素不受其它元素的影響，也不影響其它元素。
<divclass="parent"><divclass="child"></div></div><divclass="sibling"></div><styletype="text/css">.parent{position:relative;width:480px;height:320px;background-color:#008800;}.child{position:absolute;width:240px;height:160px;background-color:#ff0000;left:20px;top:20px;z-index:2;}.sibling{position:absolute;width:240px;height:160px;left:100px;top:100px;background-color:#0000ff;z-index:1;}</style>效果如圖：
在此屬性下，同一父級(jí)元素中，z-index值大的在最上層。
絕對(duì)定位元素是相對(duì)于最近定位的祖先來定位自身。一旦它找到一個(gè)已定位的祖先，該祖先之上的元素的位置就不再相關(guān)。
相對(duì)定位和絕對(duì)定位的主要區(qū)別在于，position:absolute會(huì)將子元素完全脫離文檔的正常流程，并且該子元素將相對(duì)于具有自己的位置集的第一個(gè)父元素進(jìn)行定位。
固定定位position:fixed相對(duì)于視窗定位，即使頁面滾動(dòng)，也始終停留在同一位置上。固定定位元素不會(huì)在其所在的頁面中留下間隙，其他元素會(huì)填補(bǔ)缺失的地方。
<divclass="parent"><divclass="child"></div></div><divclass="sibling"></div><styletype="text/css">.parent{position:relative;width:480px;height:320px;background-color:#008800;}.child{width:240px;height:160px;background-color:#ff0000;left:20px;top:20px;z-index:2;}.sibling{position:fixed;width:240px;height:160px;right:50px;bottom:50px;background-color:#0000ff;z-index:1;}</style>效果如圖：
基于用戶的滾動(dòng)位置定位，根據(jù)滾動(dòng)位置在relative和fixed之間切換。相對(duì)定位，直到在視窗中遇到給定的偏移位置，然后它固定到位，就像position:fixed一樣。
position:sticky元素根據(jù)正常文檔流進(jìn)行定位，然后相對(duì)它的最近滾動(dòng)祖先（nearestscrollingancestor）和containingblock(最近塊級(jí)祖先nearestblock-levelancestor)，包括table-related元素，基于top、right、bottom和left的值進(jìn)行偏移，偏移值不會(huì)影響任何其他元素的位置。
作者：天行無忌相關(guān)評(píng)說：
樂亭縣： ______ 在實(shí)際開發(fā)頁面布局時(shí),運(yùn)用position,對(duì)定位的塊級(jí)元素的嵌套的效果總是不太理解,這里做了幾個(gè)測(cè)試 一般的在w3c中我們可以很容易的獲取定義:static : 默認(rèn)值.沒有定位,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index...
樂亭縣： ______ 使用css的position:absolute屬性.應(yīng)用position:absolute屬性后的元素會(huì)向上級(jí)眾多元素尋找第一一個(gè)屬性為position:relative元素(默認(rèn)body具有relative屬性),并以此元素為基準(zhǔn)使用left,top進(jìn)行定位.可是該元素處于網(wǎng)頁中的任何位置
樂亭縣： ______ 這個(gè)一下說不清楚,你最好看看這兩個(gè)的屬性特征,就明白了!語法:float : none | left |right 參數(shù):none : 對(duì)象不浮動(dòng) left : 對(duì)象浮在左邊 right : 對(duì)象浮在右邊 : static | absolute | fixed | relative 參數(shù):static : 無特殊定位,對(duì)象遵循HTML定...
樂亭縣： ______ 先看一下定義 position:relative|absolute|static|fixed ◆static沒有特別的設(shè)定,遵循基本的定位規(guī)定,不能通過z-index進(jìn)行層次分級(jí).◆relative不脫離文檔流,參考自身靜態(tài)位置通過top,bottom,left,right定位,并且可以通過z-index進(jìn)行層次分級(jí).◆...
樂亭縣： ______ <div> 圖片、文字 </div> 一般我是同過 設(shè)置 padding(補(bǔ)白) margin(邊距)等樣式來在頁面上排版,有一些就是position 是在整個(gè)頁面上定位================================= position : static; /* 無定位 */ position : relative; /* 依物件...
樂亭縣： ______ 它的上一級(jí) 如:<div id=＂abc＂><div id=＂bcd＂ style=＂position:absolute;＂></div></div> id為bcd的div進(jìn)行的絕對(duì)定位,它的上一級(jí)就是id為abc. 如果沒有嵌套,那它的上一級(jí)應(yīng)該就是瀏覽器.
樂亭縣： ______ position:absolute; //這個(gè)是必須的,top和left才能起作用 top: 10px; //距離頂部10像素,就是想下面移動(dòng)10像素 left: 10px; //同理,是左邊 absolute是基于整個(gè)屏幕 它的父級(jí)元素如果設(shè)置 relative ,那就就是基于它的父元素的左上角計(jì)算 w3school.com.cn 有什么不懂,應(yīng)該先查手冊(cè)
樂亭縣： ______ 當(dāng)然有有,最簡(jiǎn)單的說#是id屬性而.是class屬性.1,在css樣式表中書寫時(shí),id選擇符前面應(yīng)該加前綴符號(hào)'#',而class選擇符前面應(yīng)該加前綴符號(hào)'.'. 2,id屬性一般在一個(gè)頁面中只可以使用一次,而class可以被多次引用. 3,id作為元素的...
樂亭縣： ______ 定位方案有四種:靜態(tài)定位、相對(duì)定位、絕對(duì)定位和固定定位.你可以使用CSS 3中的「position」屬性來決定要使用的定位方式. 在這四種方案中,靜態(tài)和相對(duì)定為不會(huì)影響整個(gè)文檔布局,而絕對(duì)和固定定位則會(huì)脫離文檔,因此頁面不會(huì)為這...
