CSS教程:position屬性
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:36:08 作者：佚名 
我要評論
我要評論網(wǎng)頁制作Webjx文章簡介：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)的方式。
6.當(dāng)元素設(shè)置為絕對定位后改元素內(nèi)的浮動(dòng)會(huì)自動(dòng)清除
例子：
運(yùn)行代碼框
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
7.當(dāng)絕對定位同時(shí)擁有定位屬性和margin屬性、絕對定位的的定位屬性 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)行]
我們會(huì)發(fā)現(xiàn)這個(gè)紅色的色塊距離左邊200PX.left margin-left
小結(jié)：
當(dāng)元素同時(shí)擁有浮動(dòng)和絕對定位時(shí).絕對定位的優(yōu)先權(quán)大于浮動(dòng).因?yàn)楦?dòng)受文檔的邏輯結(jié)構(gòu)位置限制。而絕對定位不會(huì)。
所以當(dāng)絕對定位脫離文檔流，絕對定位的元素不受浮動(dòng)影響.即float:left會(huì)失效，
數(shù)學(xué)上我們知道.X軸上一個(gè)數(shù)值 Y軸上的一個(gè)數(shù)值即可確定一個(gè)點(diǎn)，感官上left right屬于x軸bottom top屬于Y軸。
我們完全可以設(shè)置一個(gè)無寬度和高度絕對定位的元素同時(shí)擁有top right bottom left來實(shí)現(xiàn)其根據(jù)其參考的定位基點(diǎn)的父元素的的大小來自適應(yīng)大小.
但是IE6不支持.IE6只能識別left的值而忽視r(shí)ight.所以下面例子請?jiān)诜荌E6以及一下瀏覽器瀏覽
例子：
運(yùn)行代碼框
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
實(shí)際應(yīng)用:（個(gè)人的習(xí)慣）
-
標(biāo)題（“標(biāo)題文字”和“更多”）（相對 絕對）
需要讓一些具有vertical-align:middle屬性的元素抽出文檔流（這個(gè)看具體情況，因?yàn)関ertical-align:middle會(huì)影響文檔中的文字對齊）（絕對）
固定元素的浮動(dòng)塊（該浮動(dòng)塊內(nèi)的元素布局固定 可以用絕對定位，并設(shè)置該浮動(dòng)塊為相對）(相對 絕對)
相關(guān)文章
- 這篇文章主要介紹了CSS中的元素定位方法詳解,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-07-21
- 這篇文章主要介紹了詳解CSS 子元素相對于父元素固定定位解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-09-03
css子元素相對父元素進(jìn)行定位的實(shí)現(xiàn)
這篇文章主要介紹了css子元素相對父元素進(jìn)行定位的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(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ì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的2022-09-08
