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.在IE下沒(méi)有設(shè)置定位屬性4個(gè)方向的值的絕對(duì)定位的塊元素的表現(xiàn)是inline-block 再FF下其是block
例子：
運(yùn)行代碼框
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
這個(gè)其實(shí)是瀏覽器的差異，在FF下在塊元素?fù)碛衟osition:absolute屬性后，其依然作為一個(gè)塊元素，而相對(duì)于前面的文檔流而換行，所以為了統(tǒng)一，在這種使用情況下，可以加上display:inline即可保證各個(gè)瀏覽器統(tǒng)一
4.絕對(duì)定位元素依據(jù)其定位基點(diǎn)進(jìn)行絕對(duì)定位時(shí)會(huì)忽視其定位基點(diǎn)的padding空間
例子：
運(yùn)行代碼框
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
圖中的紅色區(qū)域是一個(gè)高度和寬度為500px且padding:100px;因?yàn)榻^對(duì)定位元素忽視其定位基點(diǎn)的padding屬性，所以在頂部呈現(xiàn)
5.設(shè)置任何一個(gè)方向的定位屬性.該絕對(duì)元素除該方向按照定位屬性的值依據(jù)其具有position屬性最近的父元素為基點(diǎn)進(jìn)行定位.其另外方向上的邏輯位置依然受前一文檔流中的元素影響.按照正常的位置進(jìn)行布局：
例子：
運(yùn)行代碼框
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
我們可以看到圖中的紅色區(qū)域，除按照l(shuí)eft:40這個(gè)屬性偏移40像素后，其垂直方向的位置依然為正常文檔流中的位置
相關(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
