css中定位中的absolute和relative是什么意思
發(fā)布時(shí)間:2014-04-15 17:01:49 作者:佚名
我要評(píng)論
做一些浮動(dòng)層等特殊特殊效果時(shí)要考慮到定位問(wèn)題就要用到Position屬性,其有四個(gè)屬性值:static、fixed、absolute和relative,想必后面兩個(gè)大家都熟悉吧
用Div+CSS進(jìn)行網(wǎng)站布局時(shí),做一些浮動(dòng)層等特殊特殊效果時(shí)要考慮到定位問(wèn)題。這就要用到Position屬性等。
Position屬性有四個(gè)值:static、fixed、absolute和relative,
后面兩個(gè)在布局中的定位里是經(jīng)常用到的,顧名思義,
absolute是指絕對(duì)定位,即將對(duì)象從文檔流中拖出,使用left,right,top,bottom等屬性進(jìn)行絕對(duì)定位,而其層疊通過(guò)z-index屬性定義。此時(shí)對(duì)象不具有邊距,但仍有補(bǔ)白和邊框。
ralative是指相對(duì)定位,就是依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移位置。
但是,怎么個(gè)絕對(duì)法,又怎么個(gè)相對(duì)法呢?
以前我一直沒(méi)有仔細(xì)去研究它,到具體應(yīng)用時(shí)有時(shí)會(huì)有點(diǎn)迷糊,我相信很多朋友也會(huì)有這樣的問(wèn)題。今天我特意測(cè)試了一下,得出了以下結(jié)論:
1、當(dāng)Position屬性值為Relative時(shí)對(duì)象原來(lái)占有的位置保留,其后面的對(duì)象按原來(lái)文檔流仍然保持原來(lái)的位置Top的值表示對(duì)象相對(duì)原位置向下偏移的距離bottom的值表示對(duì)象相對(duì)原位置向上偏移的距離兩者同時(shí)存在時(shí),只有Top起作用。left的值表示對(duì)象相對(duì)原位置向右偏移的距離right的值表示對(duì)象相對(duì)原位置向左偏移的距離兩者同時(shí)存在時(shí),只有l(wèi)eft起作用。
2、當(dāng)Position屬性值為absolute時(shí)對(duì)象從文檔流中抽取出來(lái),原占有的位置被后面的對(duì)象頂替上來(lái)Top的值表示對(duì)象上邊框與瀏覽器窗口頂部的距離bottom的值表示對(duì)象下邊框與瀏覽器窗口底部的距離兩者同時(shí)存在時(shí),只有Top起作用;如果兩者都未指定,則其頂端將與原文檔流位置一致,即垂直保持位置不變。left的值表示對(duì)象左邊框與瀏覽器窗口左邊的距離right的值表示對(duì)象右邊框與瀏覽器窗口右邊的距離兩者同時(shí)存在時(shí),只有l(wèi)eft起作用;如果兩者都未指定,則其左邊將與原文檔流位置一致,即水平保持位置不變。
在Position屬性值為absolute的同時(shí),如果有一級(jí)父對(duì)象(無(wú)論是父對(duì)象還是祖父對(duì)象,或者再高的輩分,一樣)的Position屬性值為Relative時(shí),則上述的相對(duì)瀏覽器窗口定位將會(huì)變成相對(duì)父對(duì)象定位,這對(duì)精確定位是很有幫助的。
Position屬性有四個(gè)值:static、fixed、absolute和relative,
后面兩個(gè)在布局中的定位里是經(jīng)常用到的,顧名思義,
absolute是指絕對(duì)定位,即將對(duì)象從文檔流中拖出,使用left,right,top,bottom等屬性進(jìn)行絕對(duì)定位,而其層疊通過(guò)z-index屬性定義。此時(shí)對(duì)象不具有邊距,但仍有補(bǔ)白和邊框。
ralative是指相對(duì)定位,就是依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移位置。
但是,怎么個(gè)絕對(duì)法,又怎么個(gè)相對(duì)法呢?
以前我一直沒(méi)有仔細(xì)去研究它,到具體應(yīng)用時(shí)有時(shí)會(huì)有點(diǎn)迷糊,我相信很多朋友也會(huì)有這樣的問(wèn)題。今天我特意測(cè)試了一下,得出了以下結(jié)論:
1、當(dāng)Position屬性值為Relative時(shí)對(duì)象原來(lái)占有的位置保留,其后面的對(duì)象按原來(lái)文檔流仍然保持原來(lái)的位置Top的值表示對(duì)象相對(duì)原位置向下偏移的距離bottom的值表示對(duì)象相對(duì)原位置向上偏移的距離兩者同時(shí)存在時(shí),只有Top起作用。left的值表示對(duì)象相對(duì)原位置向右偏移的距離right的值表示對(duì)象相對(duì)原位置向左偏移的距離兩者同時(shí)存在時(shí),只有l(wèi)eft起作用。
2、當(dāng)Position屬性值為absolute時(shí)對(duì)象從文檔流中抽取出來(lái),原占有的位置被后面的對(duì)象頂替上來(lái)Top的值表示對(duì)象上邊框與瀏覽器窗口頂部的距離bottom的值表示對(duì)象下邊框與瀏覽器窗口底部的距離兩者同時(shí)存在時(shí),只有Top起作用;如果兩者都未指定,則其頂端將與原文檔流位置一致,即垂直保持位置不變。left的值表示對(duì)象左邊框與瀏覽器窗口左邊的距離right的值表示對(duì)象右邊框與瀏覽器窗口右邊的距離兩者同時(shí)存在時(shí),只有l(wèi)eft起作用;如果兩者都未指定,則其左邊將與原文檔流位置一致,即水平保持位置不變。
在Position屬性值為absolute的同時(shí),如果有一級(jí)父對(duì)象(無(wú)論是父對(duì)象還是祖父對(duì)象,或者再高的輩分,一樣)的Position屬性值為Relative時(shí),則上述的相對(duì)瀏覽器窗口定位將會(huì)變成相對(duì)父對(duì)象定位,這對(duì)精確定位是很有幫助的。
相關(guān)文章
- positon有4個(gè)屬性:static relative absolute fixed,我們都知道absolute是絕對(duì)定位,relative是相對(duì)定位,但是這個(gè)絕對(duì)與相對(duì)是什么意思呢?絕對(duì)是什么地方的絕對(duì),相對(duì)又2014-11-28
CSS中的position:relative;的作用示例介紹
CSS中的position:relative是控制元素相對(duì)定位的,relative 不脫離文檔流而absolute 脫離文檔流,relative 的元素盡管表面上看到它偏離了原來(lái)的位置,但它實(shí)際上在文檔流中2013-11-05css relative相對(duì)定位的top值在不同瀏覽器中使用js獲取的差異
relative是指相對(duì)于這個(gè)對(duì)象原來(lái)所在位置(參照)的值,下面為大家將講解下使用js獲取時(shí)在IE、chrome、oprea等瀏覽器中的區(qū)別,感興趣的朋友可以參考下2013-10-24css中position:relative和overflow:hidden之間的問(wèn)題
在父標(biāo)簽中使用了overflow:hidden;時(shí),如果子標(biāo)簽中有元素的position設(shè)置成relative的時(shí)候,在IE6和IE7中父元素的overflow對(duì)其將不起作用,其實(shí)將父標(biāo)簽的position也設(shè)置成2013-09-04css中position屬性(absolute|relative|static|fixed)概述及應(yīng)用
position屬性的相關(guān)定義:static:無(wú)特殊定位,對(duì)象遵循正常文檔流;relative:對(duì)象遵循正常文檔流;absolute:對(duì)象脫離正常文檔流fixed:對(duì)象脫離正常文檔流,有興趣的朋友2013-04-08CSS position屬性absolute relative等五個(gè)值的解釋
目前幾乎所有主流的瀏覽器都支持position屬性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE瀏覽器,IE9、IE10還沒(méi)測(cè)試過(guò)),以下是w3school對(duì)position五個(gè)值的2012-12-15跨瀏覽器實(shí)現(xiàn)float:center-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
原文: http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/ 我們都知道float:left和float:rig2008-10-17css 使用relative設(shè)置top為百分比值的方法(仿百度首頁(yè))
最近在學(xué)習(xí)HTML、CSS的過(guò)程中,想模仿一下百度首頁(yè)。發(fā)現(xiàn)搜索框這一部分與上下其它元素的空白距離可以隨著窗口大小變化,下面小編給大家?guī)?lái)了css 使用relative設(shè)置top為百2018-02-27

