主要應用場景，就是我想要塊的布局根據父級來定位，而不是根據頁面。
例如，下面的例子中，我用兩個半圓拼成一個正圓，思路是用一個父級標簽把兩個子標簽包起來，父標簽是一個正圓，然后子標簽各占一半，先化成兩個矩形，然后就是位置的選擇。 這里用到的就是父相子絕，即父標簽用到相對位置，子標簽用到絕對位置，這樣子標簽的兩個半圓就能貼到父標簽，形成一個圓。
**注意：**
**1.這里面父標簽需要用相對定位，使用絕對定位的話會脫離文檔流，見下面例子。** **2.標簽寫position（relative或者absolute）的話，就會以它的父級標簽作為參考，如果父級沒寫css樣式，那就會以body樣式作為參考，如果也沒寫，就會以整個html頁面作為參考。例如這里，如果父級不設置position的話，那么那兩個子標簽就會以整個html頁面為參考點，而把矩形飄到頁面的兩端**
脫離文檔流，其實就是不是按照頁面中文本的順序，一行一行的排班下來，而是按照自己的意願，可能存在一些重疊，常用的辦法就是定位和浮動。具體見以下幾篇補充 **[什么是脫離文檔流](https://zhidao.baidu.com/question/556990261.html)** **[正常文檔流和脫離文檔流](https://www.cnblogs.com/masanhe/p/8318002.html)** **[HTML元素脫離文檔流的三種方法](https://www.cnblogs.com/ning123/p/11011845.html)**
下面這個例子，如果把父標簽的相對定位改成絕對定位，那么和父標簽相鄰的test標簽就會和該父標簽重疊，也就是脫離文檔流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
font-size: 15px;
color: #fff;
}
.test1 {
width: 400px;
height: 400px;
background: #234;
position: relative;
}
.test2 {
width: 300px;
height: 300px;
background: #345;
position: absolute;
left: 40px;
top: 40px;
}
.test {
width: 500px;
height: 500px;
background: #123;
}
</style>
</head>
<body>
<div class="test1"> test1
<div class="test2">test2</div>
</div>
<div class="test"> test</div>
</body>
</html>