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

發(fā)布時間：2020-09-17 11:02:15 來源：億速云閱讀：211 作者：小新欄目：web開發(fā)

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

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

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

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>億速云-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）

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>億速云-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è)置的父級元素進(jìn)行絕對定位，如果元素的父級沒有設(shè)置定位屬性，則依據(jù) body 元素左上角作為參考進(jìn)行定位。絕對定位元素可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數(shù)，大的在上面，可以有負(fù)值。

絕對定位的定位方法：如果它的父元素設(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>億速云-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）

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

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

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

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽