css使用position屬性實現(xiàn)定位效果的方法-創(chuàng)新互聯(lián)

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

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

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

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

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>創(chuàng)新互聯(lián)建站-position元素(靜態(tài)定位)</title>
		<style>
			.box{
				width: 300px;
				overflow: hidden;
				padding: 10px;
				border: 1px solid #000;
				margin: 10px auto;
			}
			.static {
				position: static;
				border: 3px solid #007AFF;
			}

		</style>
	</head>

	<body>
		<div class="box">
			<h3>position: static;</h3>
			<p>使用 position: static; 定位的元素，無特殊定位，遵循正常的文檔流對象:</p>
			<div class="static">
				該元素使用了 position: static;
			</div>
		</div>
	</body>

</html>

下面是效果圖：

css使用position 屬性實現(xiàn)定位效果的方法

二：相對定位（relative）

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>創(chuàng)新互聯(lián)建站-position元素(相對定位)</title>
		<style>
			.box{
				width: 300px;
				overflow: hidden;
				padding: 10px;
				border: 1px solid #000;
				margin: 10px auto;
			}
			
			
			
			.box1{
		        background-color: red;
		        width:100px;
		        height:100px;
		    }
		    .box2{
		        background-color: yellow;
		        width:100px;
		        height:100px;
		        position: relative;
		        left: 20px;
		    }
		    .box3{
		        background-color: blue;
		        width:100px;
		        height:100px;
		        position: relative;
		        right: 20px;
		    }

		</style>
	</head>

	<body>
		<div class="box">
                        <h3>position: relative;</h3>
			<div class="box1">正常位置的盒子</div>
			<div class="box2">相對于其正常位置向左移動的盒子</div>
			<div class="box3">相對于其正常位置向右移動的盒子</div>

		</div>
	</body>

</html>

下面是效果圖：

css使用position 屬性實現(xiàn)定位效果的方法

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

三：絕對定位（absolute）

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

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>創(chuàng)新互聯(lián)建站-position元素(絕對定位)</title>
		<style>
			.box{
				width: 300px;
				overflow: hidden;
				padding: 10px;
				border: 1px solid #000;
				
			}
			.div1 {
			    width: 150px;
			    height: 150px;
			    background: yellow;
			}
			.div2 {
			    width: 150px;
			    height: 150px;
			    background: red;
			    top: 150px;
			    left: 100px;
			    position: absolute;
			}

		</style>
	</head>

	<body>
		<div class="box">
			<h3>position: absolute;</h3>
			<div class="div1">
			父元素
			    <div class="div2">子元素</div>
			</div>

		</div>
	</body>

</html>

下面是效果圖：

css使用position 屬性實現(xiàn)定位效果的方法

四、固定定位（fixed）

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

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

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

分享標(biāo)題：css使用position屬性實現(xiàn)定位效果的方法-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://muchs.cn/article38/dodspp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、外貿(mào)建站、做網(wǎng)站、軟件開發(fā)、電子商務(wù)、定制開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容