css 绝地定位滚动,[demo] 带滚动条的绝对定位问题

原始代码

Document

.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;

}

疑惑为什么带滚动条的时候绝对定位元素不会再移动了？

CSS 秘籍再说一遍：知道每个元素的边界。

你得高度是不是 400，那么浏览器就把 child 放到 400 咯。

你滚动的时候，不会再去更新 child 的位置了。

相对位置不管滚动

只有 sticky 才会去更新，不过 sticky 还没实现 position: sticky

容器的宽高并没有变，所以里面的绝对定位元素不会更新的

如果宽高变了 会更新