小編給大家分享一下css使用position 屬性實現(xiàn)定位效果的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司專注于企業(yè)全網整合營銷推廣、網站重做改版、阿克塞哈薩克族自治網站定制設計、自適應品牌網站建設、HTML5、購物商城網站建設、集團公司官網建設、成都外貿網站制作、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為阿克塞哈薩克族自治等各大城市提供網站開發(fā)制作服務。

css中定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。下面開始介紹如何使用css position屬性實現(xiàn)定位效果。

一：靜態(tài)定位（static）

元素按照其在 HTML 中的位置順序決定排布的過程，默認定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創(chuàng)建一個或多個行框，置于其父元素中。本元素需要設置position為static。

	
		
		
		
	

	
		

			
position: static;
			
使用 position: static; 定位的元素，無特殊定位，遵循正常的文檔流對象:
			

				該元素使用了 position: static;
			
		
	

下面是效果圖：

二：相對定位（relative）

相對定位被看作普通流定位模型的一部分，定位元素的位置相對于它在普通流中的位置進行移動top,left,bottom,right都可以有值。使用相對定位的元素不管它是否進行移動，元素仍要占據它原來的頁面空間，可以設置z-index。使本元素相對于文檔流中的元素，或者脫離文檔流但是z-index的值比本元素的值要小的元素更加靠近用戶的視線。相對定位大的作用是為了實現(xiàn)某個元素相對于本元素的左上角絕對定位，本元素需要設置position為relative。

	
		
		
		
	

	
		

                        
position: relative;
			
正常位置的盒子
			
相對于其正常位置向左移動的盒子
			
相對于其正常位置向右移動的盒子

		
	

下面是效果圖：

相對定位元素經常被用來作為絕對定位元素的容器塊。

三：絕對定位（absolute）

將被賦予絕對定位的元素從它在普通流中的位置中拖出，使用left、right、top、bottom等屬性相對于其最接近的一個最有定位設置的父級元素進行絕對定位，如果元素的父級沒有設置定位屬性，則依據 body 元素左上角作為參考進行定位。絕對定位元素可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數，大的在上面，可以有負值。

絕對定位的定位方法：如果它的父元素設置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就會相對于它的父元素來定位，位置通過left , top ,right ,bottom屬性來規(guī)定，如果它的父元素沒有設置定位，那么就得看它父元素的父元素是否有設置定位，如果還是沒有就繼續(xù)向更高層的祖先元素類推，總之它的定位就是相對于設置了除static定位之外的定位的第一個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那么它就會相對于文檔body來定位。

	
		
		
		
	

	
		

			
position: absolute;
			

			父元素
			    
子元素
			

		
	

下面是效果圖：

四、固定定位（fixed）

固定定位與絕對定位類似，但它是相對于瀏覽器窗口定位，并且不會隨著滾動條進行滾動。

固定定位的最常見的一種用途是在頁面中創(chuàng)建一個固定頭部、固定腳部或者固定側邊欄，不需使用margin、border、padding。本元素需要設置position為fixed。

以上是css使用position 屬性實現(xiàn)定位效果的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網站制作公司行業(yè)資訊頻道！

分享標題：css使用position屬性實現(xiàn)定位效果的方法-創(chuàng)新互聯(lián)
當前地址：http://weahome.cn/article/dodspp.html