1. 程式人生 > >第八章 定位網頁元素

第八章 定位網頁元素

top ive 影響 dex 元素 class bottom 文檔流 fixed

一.定位網頁元素
	
	position	:
		
		1.static 	:默認值,代表沒有定位,元素沒有定位會以標準文檔流方式展現出來
		
		2.relative  :相對定位,元素以自身原來位置進行定位(如果設置元素浮動,那麽會以浮動後的位置作為原來的位置)
			
			規律:
				設置相對定位的盒子會相對它原來的位置,通過指定偏移,到達新的位置
				設置相對定位的盒子仍在標準文檔流中,它對父級盒子和相鄰的盒子都沒有任何影響
				設置相對定位的盒子原來的位置會被保留下來
				
		3.absolute	:絕對定位,元素以離他最近的已經定位的祖先元素進行定位,如果沒有祖先元素定位,那麽會以瀏覽器窗口進行定位
		
				使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素” 為基準進行偏移
				如果沒有已經定位的祖先元素,會以瀏覽器窗口為基準進行定位
				絕對定位的元素從標準文檔流中脫離,這意味著它們對其他元素的定位不會造成影響
				元素位置發生偏移後,它原來的位置不會被保留下來
		4.fixed	:基於瀏覽器窗口進行定位,不會隨著滾動條的移動而改變位置
		
			相對瀏覽器窗口來定位
			偏移量不會隨滾動條的移動而移動
			
	
	元素偏移方向:
		如果想讓元素向上移動,那麽top屬性寫賦值,或者bottom屬性寫正值
		如果想讓元素向下移動,那麽bottom屬性寫賦值,或者top屬性寫正值
		如果想讓元素向左移動,那麽left屬性寫賦值,或者right屬性寫正值
		如果想讓元素向右移動,那麽right屬性寫賦值,或者left屬性寫正值
二.設置定位元素的層疊
	
	z-index:默認為0	值越大層級越上
	
	opacity	:0-1		值越小越透明
	filter:alpha(opacity=x):0-100	值越小越透明

  

第八章 定位網頁元素