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