CSS教程:position屬性
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:36:08 作者：佚名 
我要評(píng)論
我要評(píng)論網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說(shuō)我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為
position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說(shuō)我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為默認(rèn)的方式。
第3：絕對(duì)定位(absolute)
當(dāng)元素設(shè)置絕對(duì)定位后.則會(huì)從正常的文檔流中脫離.其后面的元素會(huì)完全忽視這個(gè)絕對(duì)定位的元素.就好像正常文檔流中不存在這個(gè)元素一樣.然后根據(jù)離其最近的一個(gè)具有position屬性的父對(duì)象的邊緣為定位基點(diǎn)（如果沒(méi)有沒(méi)有這樣一個(gè)父對(duì)象 那么默認(rèn)依據(jù)窗口元素定位），根據(jù)設(shè)置定位屬性的4個(gè)方向的值來(lái)實(shí)現(xiàn)絕對(duì)的定位布局.
例子：
運(yùn)行代碼框
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
我們可以看到.當(dāng)色塊2設(shè)置絕對(duì)定位之后.后面的第3色塊忽視其存在，自動(dòng)填補(bǔ)到正常的文檔流中（這個(gè)是根據(jù)窗口元素定位）
我們?cè)賮?lái)看一下IE中依據(jù)窗口元素定位的一個(gè)特殊情況
例子：
運(yùn)行代碼框
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
此DEMO與position:absolute的定位工作方式無(wú)關(guān)~只是作為IE中特殊的情況列出來(lái)
除了上面的基本的position:absolute特點(diǎn)，其還有下面幾點(diǎn)；
1.如果我們只設(shè)置了position:absolute而沒(méi)有設(shè)置定位屬性的4個(gè)方向值的話.那么該絕對(duì)定位的元素依然遵循其在文檔流中的正常位置，它仍然受前一元素的文檔流位置影響，按照正常文檔流進(jìn)行布局。只不過(guò)現(xiàn)在是從正常的文檔流中抽出.其后面的元素會(huì)忽視其存在.而自動(dòng)補(bǔ)上去.因?yàn)榻^對(duì)定位的元素是不占文檔流的布局空間的。
例子：
運(yùn)行代碼框
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
例子中第2個(gè)紅色的色塊就是一個(gè)只具有position:absolute屬性的元素，它仍然在正常的布局位置呈現(xiàn)，只不過(guò)后面的元素會(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ì)定位的元素不占布局空間）
相關(guān)文章
- 這篇文章主要介紹了CSS中的元素定位方法詳解,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-21
- 這篇文章主要介紹了詳解CSS 子元素相對(duì)于父元素固定定位解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-09-03
css子元素相對(duì)父元素進(jìn)行定位的實(shí)現(xiàn)
這篇文章主要介紹了css子元素相對(duì)父元素進(jìn)行定位的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2020-09-02- 下面小編就為大家?guī)?lái)一篇css position 設(shè)置元素的定位方式詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-05
CSS元素定位之通過(guò)元素的標(biāo)簽或者元素的id、class屬性定位詳解
這篇文章主要介紹了CSS元素定位之通過(guò)元素的標(biāo)簽或者元素的id、class屬性定位，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的2022-09-08
