<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
/*
當(dāng)position屬性值設(shè)置為absolute時(shí)，則開啟了元素的絕對(duì)定位
絕對(duì)定位：
1. 開啟絕對(duì)定位，會(huì)使元素脫離文檔流
2. 開啟絕對(duì)定位以后珍坊，如果不設(shè)置偏移量，則元素的位子不會(huì)發(fā)生變化
3. 絕對(duì)定位是相對(duì)于離他最近的開啟了定位的祖先元素進(jìn)行定位的（一般情況青柄，開啟了子元素的絕對(duì)定位都會(huì)同時(shí)開啟父元素的相對(duì)定位）
如果所有的祖先元素都沒有開啟定位則相對(duì)于流浪器窗口進(jìn)行定位
4. 絕對(duì)定位會(huì)使元素上升一個(gè)層級(jí)
5. 絕對(duì)定位會(huì)改變?cè)氐男再|(zhì)
內(nèi)聯(lián)元素變成塊元素
塊元素的寬度和高度都被內(nèi)容撐開
*/
position: absolute;
/* left: 100px;
top: 100px; */
}
.box3 {
width: 300px;
height: 300px;
background-color: yellowgreen;
}
.box4 {
width: 300px;
height: 300px;
background-color: orange;
/* 開啟box4的相對(duì)定位 */
/* position: relative; */
}
.s1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box4">
<div class="box2"></div>
</div>
<div class="box3"></div>
<span class="s1">i'm a span</span>
</body>
</html>
