原始代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.parent{
width:400px;
height:400px;
background:red;
overflow: auto;
position: relative;;
border:1px solid purple
}
.content{
width:600px;
height:800px;
}
.child{
position:absolute;
bottom:0;
right:0;
width:40px;
height:40px;
background:blue;
}
</style>
<section class="parent">
<div class="content"></div>
<div class="child"></div>
</section>
</body>
</html>
疑惑為什么帶滾動(dòng)條的時(shí)候絕對(duì)定位元素不會(huì)再移動(dòng)了顾瞪？
CSS 秘籍再說一遍：知道每個(gè)元素的邊界贺奠。
你得高度是不是 400荚恶，那么瀏覽器就把 child 放到 400 咯囱怕。
你滾動(dòng)的時(shí)候，不會(huì)再去更新 child 的位置了萍倡。
相對(duì)位置不管滾動(dòng)
只有 sticky 才會(huì)去更新身弊，不過 sticky 還沒實(shí)現(xiàn) position: sticky
容器的寬高并沒有變，所以里面的絕對(duì)定位元素不會(huì)更新的
如果寬高變了 會(huì)更新
