HTML5學習_day06(2)--html之相對定位

原創

2020-02-20 13:44

相對定位就是相對於自己原來的位置只是內容偏移了而已

並且原有佔用的空間依舊存在不會被其他元素填充

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相對定位</title>
		<style type="text/css">
			#div{
				width: 1000px;
				border: 3px solid red;
			}
			#div div{
				width: 200px;
				height: 200px;
				border: 4px solid;
				display: inline-block;
			}
			/*#div .div1{
				position: relative;
				left: 230px;			
				right:100px;  優先級 left>right  top>bottom
				top:100px;
				bottom: 100px;	
				margin-left:50px;
				
			}*/
			
			/*
			
			 問題一
			   #div .div1{
				position: relative;	
				top:50px;
				margin-top: 100px;  這樣設置會整體下移  要重新設置對齊方式 vertical-align: top;
			}*/
			
		</style>
	</head>
	<body>
		<!--1.什麼是相對定位(參考點永遠是自身的左上角)
		也就是相對於自己在文檔流中的位置進行定位。
		
		2.相對定位的幾個特性
		1.不脫離文檔流，原有位置空間被保留
		2.不影響元素本身屬性的設置
		4.如果給元素設置了相對定位膽不設置偏移量，元素本身就不受任何影響的。
		-->
		<div id="div">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
			<div class="div4">div4</div>
		</div>
		<!--注意：
		1.如果一個定位元素，同時設置了top和bottom，top的優先級更高，會顯示top設置的值。
		2.一個定位元素，如果同時設置了left和right,那麼優先級取決於網站語言，在英語網頁中left優先級更高，在阿拉伯語言的網頁中right優先級更高
		3.如果一個元素設置了定位(甚至是偏設置了移)，其他元素在排版的參考的依然是那個元素的原有位置(沒有設置偏移的位置)
		4.如果一個元素設置了相對定位，原有位置空間被保留，即使該元素做偏移，其他元素也不會佔據他原有(偏移前)的位置。-->
		
		z-index:默認是0;
	</body>
</html>