1. 程式人生 > >HTML5學習_day06(2)--html之相對定位

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

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

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

<!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>