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
| Value | Description |
|---|---|
| #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影片教學######以上是html定位有幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
