position絕對定位以哪個物件為參考

admin發表於2017-11-01
物件

既然是定位，那麼肯定就有參考物件，否則就無所謂定位了。

下面先看一個例子: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.parent{ 
  width:300px; 
  height:200px; 
  border:1px solid red; 
} 
.children{ 
   width:200px; 
   height:100px; 
   background-color:green; 
   position:absolute; 
   top:50%; 
   left:50%; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
<div class="children"></div> 
</div> 
</body> 
</html>

可能在我們第一理解中，絕對定位的參考物件是父物件，但是從上面程式碼的表現來看並非如此，上面程式碼中子物件絕對定位的參考物件是瀏覽器客戶區。

下面我們修改一下程式碼: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
.parent{ 
  width:300px; 
  height:200px; 
  border:1px solid red; 
  position:relative; 
} 
.children{ 
  width:200px; 
  height:100px; 
  background-color:green; 
  position:absolute; 
  top:50%; 
  left:50%; 
} 
</style> 
</head> 
<body> 
  <div class="parent"> 
  <div class="children"></div> 
</div> 
</body> 
</html>

在父物件中加上position:relative後，子物件的絕對定位參考物件即為父物件，其實只要父物件的定位方式不是static，那麼子物件的絕對定位方式都會是父物件，否則參考物件就是瀏覽器客戶區。更多相關內容可參閱絕對定位一章節。

注意:這裡所說的視窗大家不要誤認為是body，而是body的容器html，如果清除body的外邊距的話，body就好像是瀏覽器客戶區。

相關文章