css中的定位與層級
相對定位
小技巧: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、 減小圖片總大小