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

成都創(chuàng)新互聯(lián)公司于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元長(zhǎng)豐做網(wǎng)站,已為上家服務(wù),為長(zhǎng)豐各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

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

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

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

	
		
		
		
	

	
		

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

				該元素使用了 position: static;
			
		
	

下面是效果圖：

二：相對(duì)定位（relative）

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

	
		
		
		
	

	
		

                        
position: relative;
			
正常位置的盒子
			
相對(duì)于其正常位置向左移動(dòng)的盒子
			
相對(duì)于其正常位置向右移動(dòng)的盒子

		
	

下面是效果圖：

相對(duì)定位元素經(jīng)常被用來(lái)作為絕對(duì)定位元素的容器塊。

三：絕對(duì)定位（absolute）

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

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

	
		
		
		
	

	
		

			
position: absolute;
			

			父元素
			    
子元素
			

		
	

下面是效果圖：

四、固定定位（fixed）

固定定位與絕對(duì)定位類似，但它是相對(duì)于瀏覽器窗口定位，并且不會(huì)隨著滾動(dòng)條進(jìn)行滾動(dòng)。

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

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