相對定位

小技巧：div.box$*+tab

——

<divclass="box1"></div>

<divclass="box2"></div>

<divclass="box3"></div>

Position開啟relative時，開啟元素的相對定位：

1、  開啟後不設定偏移量，不變化

2、  相對定位是相對於元素在文件流中的變化進行定位

3、  元素不會脫離文件流

4、  相對定位元素會提升一個層級

5、  不會改變元素性質

注：1、position屬性為非static值

2、可通過設定left、right、bottom、top設定偏移量

3、通常確定一個元素的位置只需要兩個值就可以

絕對定位

Position開啟absolute時，開啟絕對定位：

1、  開啟後元素脫離文件流

2、  不設定偏移量位置不變化

3、  相對於瀏覽器視窗進行定位

4、  祖先元素沒有開啟，以瀏覽器視窗為主

5、  絕對定位使元素提升一個層級

6、  改變元素的性質

固定定位

Position開啟fixed時，開啟固定定位：

1、  固定定位是一種絕對定位

2、  不同的是，固定定位只相對於瀏覽器視窗就行定位

3、  固定在瀏覽器視窗的某個位置

4、  IE6不支援

元素的層級

注：

1、定位元素層級相同，下會蓋住上

2、z-index：1，依次遞增

3、父元素層級再高，也不會蓋住子元素

opacity

Opacity設定顏色的透明：

1、0-1之間

2、IE8及以下不支援，需要使用filter：aipha（Opacity=50）

注：需要1-100之間的值

3、IE6中無法測試

背景

設定背景圖片：

1、  圖大於塊，只顯示左上

2、  background-image: url(相對路徑);img/1.jpg ../img/1.jpg

3、  背景小於，重複平鋪

4、  background-repeat: ;

76-背景二

background-attachment:inherit;

注：常見，部落格，文字動，圖片動

按鈕練習

整合為一個圖，通過background-position切換效果

優點：

1、  瀏覽器傳送一次請求載入多圖，效率提高

2、  減小圖片總大小