定位网页元素
定位網頁元素
一、position屬性:
1.static:默認值,網頁沒有定位
2.relative:相對定位
(1)設置相對定位的元素,盒子會相對于他原來的位置進行偏移,達到新位置。
(2)設置相對定位的元素,盒子仍然在原來的文本流中,對父級元素和相鄰的元素不受影響。,。
(3)設置相對定位的元素,盒子原來的位置會被保留下來。
(4)對于浮動的元素,相對定位也管用
3.absolute:絕對定位
(1)使用了絕對定位的元素以它最近的一個“已經定位”的“祖先”元素為基準進行偏移。如果沒有已經定位的祖先元素,那么會以瀏覽器窗口為基準來進行定位。
(2)絕對定位的元素,從文檔流中脫離,這意味著他們對其他元素的定位不會造成影響。
4.fixed:固定定位
(1)相對于瀏覽器窗口來定位。
(2)偏移量不會隨著滾動條的移動而移動。
5.固定定位的使用場景:
(1)一般在網頁的左右兩邊固定廣告,返回頂部圖標、吸頂導航欄中使用。
6.z-index: 用于調整元素定位時重疊層的上下位置,其語法為:
z-index:9999;
需要注意的是,使用z-index的前提必須該元素已經定位了(relative,absolute,fixed)
7.透明度:opacity:設置值,值為0-1,值越小越透明。eg:0.4
在IE8下面使用濾鏡:filter:alpha(opacity=40)。
總結
- 上一篇: 多功能语音播放器上线啦~
- 下一篇: 在护卫神上部署javaWeb项目,已经测