|
第3：絕對(duì)定位(absolute)
當(dāng)元素設(shè)置絕對(duì)定位后.則會(huì)從正常的文檔流中脫離.其后面的元素會(huì)完全忽視這個(gè)絕對(duì)定位的元素.就好像正常文檔流中不存在這個(gè)元素一樣.然后根據(jù)離其最近的一個(gè)具有position屬性的父對(duì)象的邊緣為定位基點(diǎn)（如果沒有沒有這樣一個(gè)父對(duì)象 那么默認(rèn)依據(jù)窗口元素定位），根據(jù)設(shè)置定位屬性的4個(gè)方向的值來實(shí)現(xiàn)絕對(duì)的定位布局.
例子：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
我們可以看到.當(dāng)色塊2設(shè)置絕對(duì)定位之后.后面的第3色塊忽視其存在，自動(dòng)填補(bǔ)到正常的文檔流中（這個(gè)是根據(jù)窗口元素定位）
我們?cè)賮砜匆幌翴E中依據(jù)窗口元素定位的一個(gè)特殊情況
例子：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
此DEMO與position:absolute的定位工作方式無關(guān)~只是作為IE中特殊的情況列出來
除了上面的基本的position:absolute特點(diǎn)，其還有下面幾點(diǎn)；
1.如果我們只設(shè)置了position:absolute而沒有設(shè)置定位屬性的4個(gè)方向值的話.那么該絕對(duì)定位的元素依然遵循其在文檔流中的正常位置，它仍然受前一元素的文檔流位置影響，按照正常文檔流進(jìn)行布局。只不過現(xiàn)在是從正常的文檔流中抽出.其后面的元素會(huì)忽視其存在.而自動(dòng)補(bǔ)上去.因?yàn)榻^對(duì)定位的元素是不占文檔流的布局空間的。
例子：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
例子中第2個(gè)紅色的色塊就是一個(gè)只具有position:absolute屬性的元素，它仍然在正常的布局位置呈現(xiàn)，只不過后面的元素會(huì)忽視其存在
2.絕對(duì)定位會(huì)自動(dòng)把一個(gè)元素轉(zhuǎn)化為塊元素
例子：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
按照標(biāo)準(zhǔn)的渲染方式.行間元素設(shè)置的寬度和高度是被忽略的，但是當(dāng)給元素絕對(duì)定位之后，該元素會(huì)具有塊元素的特性，而可以設(shè)置寬度和高度（雖然絕對(duì)定位的元素不占布局空間）
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) position兩三事 [1] 下一頁(yè) position兩三事 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) position兩三事 [2]
