css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）-css教學-PHP中文網

首頁

web前端

css教學

css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）

青灯夜游

Sep 07, 2018 am 11:13 AM

cssposition定位

這篇文章帶給大家的內容是關於css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

css中定位的基本概念很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。以下開始介紹如何使用css position屬性實現定位效果。

一：靜態定位（static）

元素依照其在HTML 中的位置順序決定排布的過程，預設定位，元素出現在正常的流中（忽略top, bottom, left, right 或z-index 聲明）。元素框正常產生。區塊級元素產生一個矩形框，作為文件流程的一部分，行內元素則會建立一個或多個行框，置於其父元素中。本元素需要設定position為static。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>PHP中文网-position元素(静态定位)</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">
			<h2 id="position-nbsp-static">position: static;</h2>
			<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
			<div class="static">
				该元素使用了 position: static;
			</div>
		</div>
	</body>

</html>

下面是效果圖：

css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）

#二：相對定位（relative）

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>PHP中文网-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">
                        <h2 id="position-nbsp-relative">position: relative;</h2>
			<div class="box1">正常位置的盒子</div>
			<div class="box2">相对于其正常位置向左移动的盒子</div>
			<div class="box3">相对于其正常位置向右移动的盒子</div>

		</div>
	</body>

</html>

下面是效果圖：

css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）

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

三：絕對定位（absolute）

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

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>PHP中文网-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">
			<h2 id="position-nbsp-absolute">position: absolute;</h2>
			<div class="div1">
			父元素
			    <div class="div2">子元素</div>
			</div>

		</div>
	</body>

</html>

下面是效果圖：

css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）