position: absolute; 属性会使元素脱离正常的文档流，并相对于最近的非 static 定位祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是视口）进行定位。
但是当top和left没有指定具体值时，元素的在上下文中的位置会在默认position: relative时应该存在的位置，不过由于脱离了文档流，层级会高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div style="background-color: antiquewhite">
<div style="width: 100px; height: 100px; background-color: red">
<div style="width: 100%; height: 100%"></div>
<div
style="
position: absolute;
width: 20px;
height: 20px;
background-color: blue;
"
></div>
</div>
<div style="width: 100px; height: 100px; background-color: red">
<div style="width: 100%; height: 100%"></div>
<div
style="
position: absolute;
width: 20px;
height: 20px;
background-color: blue;
"
></div>
</div>
</div>
</body>
</html>
