CSS的相對定位

標籤：style   io   color   ar   os   使用   sp   strong   div   

CSS的相對定位：

一.基本概念:
顧名思義，此種定位是相對某一個對象進行的位移，相對定位並不能使對象脫離文檔流，儘管它的位置可能產生位移，但是對象初始位置仍然會被保留。
如果要真正掌握此種定位方式，搞清楚需相對於哪個對象進行位移是關鍵點。
二.如何將一個元素設定為相對定位:
當一個對象的position屬性值被設定為relative的時候就會發生相對定位:

position:relative

三.定位參考對象:
可以使用top屬性和left屬性設定相對定位對象的位移量。
相對定位的位移參考對象是此對象本身。
代碼執行個體:
首先看一個沒有使用定位的代碼執行個體:

<!DOCTYPE html> 
<html> 
<head> <meta charset=" utf-8"> 
<title>CSS相對定位</title>
<style type="text/css"> 
.father{ width:400px; height:400px; margin:50px; }
.first{ width:100px; height:100px; background-color:red }
.second{ width:100px; height:100px; background-color:blue }
</style> 
</head> 
<body> 
<div class="father"> 
<div class="first">
</div> 
<div class="second">
</div> 
</div> 
</body>
</html>

在以上代碼中，所有的對象都沒有採用相對定位，這裡無須多介紹了。
再來看一段採用相對定位的代碼:

<!DOCTYPE html> 
<html>
<head> <meta charset=" utf-8">
<title>CSS相對定位</title> 
<style type="text/css"> 
.father{ width:400px; height:400px; margin:50px; } 
.first{ width:100px; height:100px;
background-color:red; position:relative; left:20px; top:30px; } 
.second{ width:100px; height:100px; background-color:blue }
</style> 
</head>
<body> 
<div class="father">
<div class="first">
</div> 
<div class="second">
</div> 
</div>
</body>
</html>

在以上代碼中，first元素採用了相對定位，併產生位移，位移是以對象沒有產生位移前的位置為參考的。同時也可以看出，first元素的位移前的位置依然會被保留，它周邊的元素不能夠佔據。
特別說明:定位元素經常與z-index屬性一起使用，具體我們可以參閱CSS的z-index屬性用法詳解　

CSS的相對定位