我们知道绝对定位是依据定位元素的包含块进行定位,比如祖先元素相对定位,那么他的子级元素设为绝对定位时的参考元素就是这个祖先元素,但是考虑到下面这种情况:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
height: 1200px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
bottom: 100px;
left: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
这种情况按我以前的理解可能.box
就会定位到整个页面底部100px处。然而真实情况是他会定位到距离浏览器首屏对应的页面的位置。看示意图:
这一点确实是以前从没有注意到的。只能说,活到老,学到老。