參照父元素寬度的元素：padding margin width text-indent
特別注意：`margin-top:20%;` 為父元素寬度的的20%耻瑟。
參照父元素高度的元素：height
參照父元素屬性: font-size line-height
特別：top bottom left right
相對(duì)定位的時(shí)候宴胧，參照的是父元素的內(nèi)容區(qū)域的高度與寬度猛蔽，而絕對(duì)定位的時(shí)候參照的是最近的定位元素包含padding的高度與寬度初斑。
即：相對(duì)定位只參照內(nèi)容寬度，絕對(duì)定位參照padding box。
<style>
*{
padding: 0;
margin: 0;
/* box-sizing: border-box; */
}
.outer{
position: relative;
width: 100px;
height: 100px;
background: #ccc;
border:20px solid grey;
margin: 120px;
padding: 20px;
}
.inner-relative{
position: relative;
width: 100px;
height: 100px;
background: #ccc;
border:20px solid grey;
top:100%;
left: 100%;
background: greenyellow;
border: 10px solid yellow;
z-index: 1;
}
.inner-absolute{
position: absolute;
width: 100px;
height: 100px;
background: #ccc;
border:20px solid grey;
top:100%;
left: 100%;
background: greenyellow;
border: 10px solid yellow;
z-index: 1;
}
#border{
width: 100%;
height: 200px;
border-bottom:1px solid #ccc;
}
</style>
<body>
<div class="outer">
<div class="inner-relative"></div>
</div>
<div class="outer">
<div class="inner-absolute"></div>
</div>
</body>
image.png
