CSS教程:position屬性
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2009-04-02 19:36:08 作者:佚名
我要評(píng)論

網(wǎng)頁制作Webjx文章簡(jiǎn)介:position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為
position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為默認(rèn)的方式。
position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動(dòng)條他依然可以在瀏覽器的左上角.posotion屬性有4個(gè)取值.由于static為默認(rèn)的方式。所以實(shí)際上可用的值只有3個(gè) 為了方便閱讀~
以下統(tǒng)稱為:固定(fixed)、相對(duì)(relative)、 絕對(duì)(absolute).
第1:固定定位(fixed)
固定定位可以讓某一元素固定在屏幕的某個(gè)位置.其效果和背景的background-attachment:fixed屬性相似!但是IE6以及更早的版本不支持.所以以下例子請(qǐng)?jiān)诜荌E6以下瀏覽器下瀏覽
例子:
運(yùn)行代碼框
[Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
第2:相對(duì)定位(relative)
相對(duì)定位是依據(jù)設(shè)置定位屬性的4個(gè)方向上的任意值來實(shí)現(xiàn)相對(duì)與其本來在文檔中正常顯示的位置的偏移;
當(dāng)相對(duì)定位的元素偏移出其本來的文檔流的位置:其他元素仍然認(rèn)為那個(gè)位置為其的邏輯文檔流區(qū)域.而不會(huì)去補(bǔ)上去,雖然我們感官上認(rèn)為那里是沒有東西的~
例子:
運(yùn)行代碼框
[Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
其中第2個(gè)色塊就是相對(duì)于其本來的文檔流中的位置依據(jù)left:10px;top:20px;的定位屬性值進(jìn)行偏移.
其后面的第3個(gè)色塊依然認(rèn)為前面的空白(就是第3的原本的文檔流的位置)為第3個(gè)色塊的文檔流區(qū)域 則不會(huì)自動(dòng)填充上去.
當(dāng)相對(duì)定位的父元素出現(xiàn)滾動(dòng)條時(shí),IE瀏覽器的特殊情況
例子:
運(yùn)行代碼框
[Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
當(dāng)相對(duì)定位的父元素有滾動(dòng)條的時(shí)候,該相對(duì)定位元素再IE的表現(xiàn)很詭異(其后面的元素依然認(rèn)為那個(gè)位置為該元素的默認(rèn)位置,而表現(xiàn)出相對(duì)定位的特性,但是拉動(dòng)滾動(dòng)條時(shí),在FF下正常即相對(duì)定位的元素和文檔一起滾動(dòng),但是在IE系列里面,相對(duì)定位的色塊依然在原地不動(dòng),此時(shí)元素的特性有點(diǎn)像絕對(duì)定位)
當(dāng)相對(duì)定位同時(shí)擁有定位屬性的4個(gè)方向的值和margin屬性。相對(duì)定位的定位屬性 top right bottom left和margin-top margin-right margin-bottom margin-left;各個(gè)方向上一至的時(shí)候其值會(huì)產(chǎn)生疊加效果,而按照方向執(zhí)行疊加后的數(shù)值的偏移
例子:
運(yùn)行代碼框
[Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
相關(guān)文章
- 這篇文章主要介紹了CSS中的元素定位方法詳解,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-21
- 這篇文章主要介紹了詳解CSS 子元素相對(duì)于父元素固定定位解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小2020-09-03
css子元素相對(duì)父元素進(jìn)行定位的實(shí)現(xiàn)
這篇文章主要介紹了css子元素相對(duì)父元素進(jìn)行定位的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2020-09-02- 下面小編就為大家?guī)硪黄猚ss position 設(shè)置元素的定位方式詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-05
CSS元素定位之通過元素的標(biāo)簽或者元素的id、class屬性定位詳解
這篇文章主要介紹了CSS元素定位之通過元素的標(biāo)簽或者元素的id、class屬性定位,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的2022-09-08