HTML和CSS的那些事兒4-Position,Floats,Z-Index

文章目錄

• 1，定位之預設定位-static position
• 2，定位之絕對位置-absolute Position
• 3，定位之相對定位-relative position
• 4，定位之固定定位-fixed position
• 5，浮動-Floats
• 6，浮動之清除浮動-Clear Floats
• 7，Z-Index-我叫Z-index

HTML和CSS的那些事兒1-標籤屬性和元素

HTML和CSS的那些事兒2-CSS

HTML和CSS的那些事兒3-HTML中級篇

恩，看來還是很多點要深入…比如不同的瀏覽器對所有dom元素都有各自的預設樣式，這種預設樣式賦予標籤語義的外在表現，這就是為什麼h1~h6預設就是粗體，一看就知道是做標題的料～

1，定位之預設定位-static position

所有元素樣式的position屬性的值都是static。position:static使元素至於正常的呈現流中。沒啥好說的。。

2，定位之絕對位置-absolute Position

相對於根項目HTML

相對於其他容器元素

絕對位置的元素永遠相對於包含它的容器元素進行定位，而不管包含它的容器元素的定位屬性是啥。所以絕對位置的元素脫離了正常的元素呈現流(塊狀元素從上到下，內嵌元素從左至右)。

在非絕對位置元素的眼裡：絕對位置的那哥們就一瘋子，讓它去逍遙吧，我們在正常的活著，並且呈現的時候忽略掉它的存在就可以了。

3，定位之相對定位-relative position

相對定位的元素不會從正常的元素呈現流中脫離。其相鄰的元素會按著正常的呈現方式呈現，

在普通元素的眼裡：相對定位的那哥們是有點另類，可通過left和top屬性到處劈腿，但還好不太過分。我們呈現的時候還是兼顧著它吧。

相對定位元素的“相對”，不是相對於別的元素，而是相對於當前呈現流中元素沒加position:relative之前自身的位置！（我懂了，不過也太TMD拗口了唉）

 

絕對位置和相對定位的配合使用可達到各種定位效果。

4，定位之固定定位-fixed position

固定定位是css定位史上的亮點，可惜IE眼睛長在PP後面，看不到它所以對它不友好唉。。特別是IE6那廝混蛋！

固定定位和絕對位置一樣的瘋狂！

絕對位置相對於父級容器元素；固定定位只相對於瀏覽器的視窗(viewport)。

5，浮動-Floats

浮動在css的本意不是用於定位的！俺要浮動元素，實現內容或元素排版！

6，浮動之清除浮動-Clear Floats

在元素A上清除浮動，使得A不再圍繞別的浮動元素。反過來說，一般情況下浮動的元素會被鄰近的內容圍繞呈現，當鄰近的元素應用了clear屬性，就會和浮動的元素分開。

clear具體可以有left，right，和both.

最精簡的clearfix寫法（來自於古狗大神）：

.clearfix{zoom:1;}

.clearfix:after{

content:’\20’;display:block;clear:both;

}

說明：

content:'\20'指定在浮動列表後增加一個空白字元，

首先這個字元不可見，無需visibility:hidden來隱藏，

其次他沒有高度，無需height:0來隱藏其高度…

7，Z-Index-我叫Z-index

說白了就是元素堆疊時的索引號(序號)。z-index為元素建立了堆疊方向的座標。