html定位有幾種方式

html定位有：1、預設定位，static；2、相對定位，relative；3、絕對定位，absolute；4、混合相對定位和絕對定位，relative&&absolute；5、固定定位，fixed；6 、浮動，float。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

1、static(預設)

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

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

2、relative(相對定位)

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

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

3、absolute(絕對定位)

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

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

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

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

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

則子元素的絕對定位的參考物為父元素。

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

#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定位，我們很容易讓一個p定位在瀏覽器文件的左上，右上等方位。例如你想要加入一個訊息提示的p，並將該p固定在右上方，你可以使用以下css

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

6、float(浮動)

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

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

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

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

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

7、reference

#ValueDescription staticElements renders in order, as they appear in the document flow. This is default.absoluteThe element is positioned relative to its first positioned (not static) ancestor elementfixedThe element is positioned relative to the browser windowrelativeThe element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

Value	Description

inherit##The value of the position property is inherited from the parent element

##########推薦學習：###html影片教學######

以上是html定位有幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！