position:relative相對定位不脫離文件流

antzone發表於2019-01-14

關於文件流概念參閱CSS文件流通俗介紹一章節。

本文將會通過程式碼例項證實一下相對定位是否會脫離文件流。

如果一個元素脫離文件流，那麼它不再佔據文件流的空間，後面的元素會填補此空間。

下面通過程式碼例項做一下證實：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#top {
  width:100px;
  height:100px;
  background:#ccc;
  position:relative;
  left:130px;
}
#bottom {
  width:100px;
  height:100px;
  background:green;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/14/143001vswjl79hw3zwwql3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到，相對定位的原來位置依然被儲存，後面的元素並不能夠填充。

更多關於相對定位內容可以參閱CSS 相對定位一章節。

相關文章