css使用position屬性實現定位效果的方法-創新互聯

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

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

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

一：靜態定位（static）

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

<!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;
			}
			.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 屬性實現定位效果的方法

二：相對定位（relative）

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

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

三：絕對定位（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>創新互聯建站-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 屬性實現定位效果的方法

四、固定定位（fixed）

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

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

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

分享標題：css使用position屬性實現定位效果的方法-創新互聯
網站網址：http://www.js-pz168.com/article38/dodspp.html

成都網站建設公司_創新互聯，為您提供網站排名、外貿建站、做網站、軟件開發、電子商務、定制開發

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

猜你還喜歡下面的內容

久久99久久人婷婷精品综合_超碰aⅴ人人做人人爽欧美_亚洲电影第三页_日韩欧美一中文字暮专区_波多野结衣的一区二区三区_婷婷在线播放_人人视频精品_国产精品日韩精品欧美精品_亚洲免费黄色_欧美性猛交xxxxxxxx

css使用position屬性實現定位效果的方法-創新互聯