定位
使用position屬性把一個元素放置到網(wǎng)頁中的位置
可選值:
(1)static:默認值役电,元 素沒有開啟定位
(2)relative:開啟元素的相對定位(開啟了元素的相對定位 以后围俘,而不設置偏移量時,元素不會發(fā)生任何變化)。
1>相對定位相對于其自身原來在文檔流中的位置定位着倾、
2>不會脫離文檔流、
3>并且使元素提升一個層級、
4>不會改變元素的性質(zhì)(塊還是塊绢陌,內(nèi)聯(lián)還是內(nèi)聯(lián))
當開尿素啟了元素的定位(position不是默認值)時,可以通過以下四個屬性來設置元素的偏移量(可以為負值):
left:相對于定位位置的左側(cè)偏移量;
right:相對于定位位置的右側(cè)偏移量;
top:相對于定位位置的上邊偏移量;
bottom:相對于定位位置的下邊偏移量;
一般選擇水平方向的一個偏移量和垂直方向的偏移量來為一個元素進行定位
(3)absolute:開啟元素的絕對定位熔恢。絕對定位相對于離他最近的且開啟定位的祖先元素定位
絕對定位:
1.開啟絕對定位脐湾,會使元素脫離文檔流
2.開啟絕對定位以后,如果不設置偏移量叙淌,則元素的位置不會發(fā)生變化
3.絕對定位是相對于離他最近的秤掌、開啟了定位的祖先元素進行定位的(一般情況,開啟了子元素的絕對定位鹰霍,都會同時開啟父元素的相對定位)
如果所有的祖先元素都沒有開啟定位闻鉴,則會相對于瀏覽器窗口進行定位
4.絕對定位會使元素提升一個層級
5.絕對定位會改變元素的性質(zhì):
內(nèi)聯(lián)元素變成塊元素,
塊元素的寬度和高度默認都被內(nèi)容撐開
(4)fixed:開啟元素的固定定位(也是絕對定位的一種)茂洒。固定定位是特殊的絕對定位孟岛,永遠相對于瀏覽器 整個窗口定位,固定在瀏覽器窗口获黔,不會隨著窗口滾動而滾動(但是不是相對于瀏覽器左上角進行定位)
絕對定位:
1.開啟絕對定位蚀苛,會使元素脫離文檔流
2.開啟絕對定位以后,如果不設置偏移量玷氏,則元素的位置不會發(fā)生變化
3.絕對定位是相對于離他最近的堵未、開啟了定位的祖先元素進行定位的(一般情況,開啟了子元素的絕對定位盏触,都會同時開啟父元素的相對定位)
如果所有的祖先元素都沒有開啟定位渗蟹,則會相對于瀏覽器窗口進行定位
4.絕對定位會使元素提升一個層級
5.絕對定位會改變元素的性質(zhì):
內(nèi)聯(lián)元素變成塊元素块饺,
塊元素的寬度和高度默認都被內(nèi)容撐開
層級
如果定位元素的層級是一樣,則下邊的元素會蓋住上邊的
通過z-index屬性可以用來設置元素的層級
可以為z-index指定一個正整數(shù)作為值雌芽,該值將會作為當前元素的層級授艰,層級越高,越優(yōu)先顯示
對于沒有開啟定位的元素不能使用z-index
設置元素的透明背景
opacity可以用來設置元素背景的透明世落,它需要 一個0-1之間的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
opacity屬性在IE8及以下的瀏覽器中不支持
IE8及以下的瀏覽器需要使用如下屬性代替
alpha(opacity=透明度)
透明度淮腾,需要一個0-100之間的值
0 表示完全透明
100 表示完全不透明
50 半透明
這種方式支持IE6,但是這種效果在IE Tester中無法測試
父元素的層級再高屉佳,也不會蓋住子元素