本系列部落格彙總在這裡：JavaWeb_CSS 彙總
目錄
- 一、相對定位
- 示例
- 二、CSS 中 div 相對定位對文檔流的影響
- 示例
一、相對定位
- 相對定位是一個非常容易了解的概念，如果對一個元素先對定位，可以設定其水準位置和垂直位置，這個元素相對于元素的起點（沒有定位的左上角原始位置）開始移動。
- 注意：在使用相對定位的時候無論是否進行移動，元素仍然會占據原有的空間，是以移動元素可能覆寫其他元素。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> www.weiyuxuan.com </title>
</head>
<style type="text/css">
body
{
margin: 10px;
font-size: 12px;
font-family: Arial;
}
.outside
{
width: 500px;
height: 200px;
background-color: #a9d6ff;
border: 1px dashed black;
}
.inside
{
padding: 10px;
background-color: #fffcd3;
border: 1px dashed black;
width: 100px;
position: relative;
left: 20px;
top: 80px;
}
</style>
<h1> 定位 </h1>
<hr>
<body>
<div class="outside">
<div class="inside"> 相對原點的定位 </div>
</div>
</body>
</html> 
二、CSS 中 div 相對定位對文檔流的影響
div1 相對定位脫離了文檔流，但是後續的 div 還會認為 div1 是在沒有定位之前的狀态，所有後續的 div 不會填補 div1 的空缺位置，而是繼續按着文檔流來排序。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> www.weiyuxuan.com </title>
</head>
<style type="text/css">
body
{
margin: 10px;
font-size: 12px;
font-family: Arial;
}
.outside
{
width: 500px;
height: 200px;
background-color: #a9d6ff;
border: 1px dashed black;
}
.inside
{
margin:10px;
padding: 10px;
background-color: #fffcd3;
border: 1px dashed black;
position: relative;
left: 100px;
top: 220px;
}
.inside1
{
margin:10px;
padding: 10px;
background-color: #fffcd3;
border: 1px dashed black;
}
</style>
<h1> 定位 </h1>
<hr>
<body>
<div class="outside">
<div class="inside"> 相對原點的定位 div1 </div>
<div class="inside1"> 相對原點的定位 div2 </div>
</div>
</body>
</html> 