html中幾種定位的方法

標籤：body   nbsp   viewport   fixed   win   解析度   view   app   stat   

1，static(預設)

當你沒有為一個元素(例如div)指定定位方式時，預設為static，也就是按照文檔的流式(flow)定位，將元素放到一個合適的地方。所以在不同的解析度下，採用流式定位能很好的自適合，取得相對較好的布局效果。

一般來說，我們不需要指明當前元素的定位方式是static——因為這是預設的定位方式。除非你想覆蓋從父元素繼承來的定位系統。

left,top屬性對static沒有效果，static是靠margin這些定位的。

2，relative(相對定位)

在static的基礎上，如果我想讓一個元素在他本來的位置做一些調整(位移)，我們可以將該元素定位設定為relative，同時指定相對位移(利用top,bottom,left,right)。

有一點需要注意的是，相對定位的元素仍然在文檔流中，仍然佔據著他本來佔據的位置空間——雖然他現在已經不在本來的位置了。

 

3，absolute(絕對位置)

如果你想在一個文檔(Document)中將一個元素放至指定位置，你可以使用absolute來定位，將該元素的position設定為absolute，同時使用top,bottom,left,right來定位。

如果沒有父元素，位置是相對於body來進行的。

絕對位置會使元素從文檔流中被刪除，結果就是該元素原本佔據的空間被其它元素所填充。

  子項目絕對位置，父元素絕對位置 

4，mix relative and absolute(混合相對定位和絕對位置)

如果對一個父元素設定relative，而對它的一個子項目設定absolute，如：

 

1234	<div id="parent" style="position:relative">     <div id="child" style="position:absolute">     </div> </div>

則子項目的絕對位置的參照物為父元素。

 

利用混合定位，我們可以用類似下面的css來實現兩列(Two Column)定位

 

123456789101112131415

#div-parent {  position:relative; } #div-child-right {  position:absolute;  top:0;  right:0;  width:200px; } #div-child-left {  position:absolute;  top:0;  left:0;  width:200px; }

 

5, fixed(固定定位)

我們知道absolute定位的參照物是“上一個定位過的父元素(static不算)”，那麼如果我想讓一個元素定位的參照物總是整個文檔(viewport)，怎麼辦呢？

答案是使用fixed定位，fixed定位的參照物總是當前的文檔。利用fixed定位，我們很容易讓一個div定位在瀏覽器文檔的左上，右上等方位。比如你想添加一個資訊提示的div，並將該div固定在右上方，你可以使用以下css

 

1	.element  {  position:fixed;  top:2%;  right:2%; }

 

6,float(浮動)

對於浮動，需要瞭解的是：

*浮動會將元素從文檔流中刪除，他的空間會被其它元素補上。

*浮動的參數物是父元素，是在父元素這個容器中飄。

*為了清除浮動造成的對浮動元素之後元素的影響，我們在浮動元素之後加一個div，並將這個div的clear設定為both。

*如果兩個元素都設定了浮動，則兩個元素並不會重疊，第一個元素佔據一定空間，第二個元素緊跟其後。如果不想讓第二個元素緊跟其後，可以對第二個浮動的元素使用clear。

 

7，reference

 

Value	Description
static	Elements renders in order, as they appear in the document flow. This is default.
absolute	The element is positioned relative to its first positioned (not static) ancestor element
fixed	The element is positioned relative to the browser window
relative	The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element‘s LEFT position
inherit	The value of the position property is inherited from the parent element

 

html中幾種定位的方法