1，static(默認)
當你沒有為一個元素(例如div)指定定位方式時，默認為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，如：
1
2
3
4
<div id="parent" style="position:relative">
<div id="child" style="position:absolute">
</div>
</div>
則子元素的絕對定位的參照物為父元素。
利用混合定位，我們可以用類似下面的css來實作兩列(Two Column)定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#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。
uj5u.com熱心網友回復：
不錯 很有幫助uj5u.com熱心網友回復：
值得一看 對學電商的同學很有幫助 感謝樓主的分享uj5u.com熱心網友回復：
不錯， 很棒uj5u.com熱心網友回復：
這個好，期待你的更新uj5u.com熱心網友回復：
感謝分享！筆記式的基礎知識，建議發到個人博客
uj5u.com熱心網友回復：
好的，我會采納的，謝謝
uj5u.com熱心網友回復：
很有用，對自己和其它人也很有用uj5u.com熱心網友回復：
是的呢. 我希望以后都會幫到你
uj5u.com熱心網友回復：
是的呢. 我希望以后都會幫到你
uj5u.com熱心網友回復：
我希望以后都會幫到你，謝謝你uj5u.com熱心網友回復：
不錯哦，給我們帶來了很大的幫忙呢uj5u.com熱心網友回復：
內容很好，很值得一看uj5u.com熱心網友回復：
值得一看 對學電商的同學很有幫助 感謝樓主的分享轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/120238.html
標籤：非技術版
下一篇：萌新輔導班