[css问题]absolute在顶部的元素不占滚动距离(符合预期),absolute在底部的元素却占用滚动距离(不符合预期)?

Question

这是demo代码

https://codepen.io/643104191/pen/GRwMEpX

打算使用IntersectionObserver监听内容滚动到底部/顶部,
监听的root是.scroll,
监听的target是.flag-body--topor.flag-body--bottom,
监听是符合预期的,
但是发现滚动到底部的时候,
.flag-body--bottom竟然可见并且再底部占了一块滚动距离!
(按理说position: absolute应该是不占位置的,也不应该占用滚动距离)
如果希望.flag-body--bottom不占滚动距离应该怎么处理?

Answer 1

元素 .flag 的去掉相对定位的属性就行了。但这样他会影响到更外部的滚动容器，也就是浏览器窗口（因为 overflow 的默认值是 visible）。

所以需要给元素 .flag 设置 overflow:hidden 这样的样式，使溢出的内容隐藏就可以解决你说的这个问题。

对于这种绝对定位元素溢出导致影响滚动容器的现象，可以看MDN上面关于这部分的解释是:

1. CSS 尽力减少“数据损失”
2. 控制溢出行为的属性是初始值为 visible 的 overflow 属性。这就是为什么我们可以看到溢出内容。

所以在元素 .flag 有相对定位时，flag-body--bottom 元素就会相对于 .flag 元素做偏移。那么因为 .flag 元素的 overflow 是默认值 visible 所以内容在溢出同时也会显示，导致影响到 .flag 的外部滚动容器 .scroll 元素。

如果元素 .flag 设置了 overflow:hidden 那么溢出的内容（flag-body--bottom 元素）就会被隐藏掉，自然就不会影响到外部容器 .scroll 元素了。

---

相关阅读

溢出的内容 - 学习 Web 开发 | MDN
流布局和溢出 - CSS：层叠样式表 | MDN

Answer 2

position: relative。这个，还会占据原来的文档流。

Answer 3

说一点思路，不一定能解决你的问题。

绝对定位确实会影响滚动条，这也是为什么通过绝对定位去隐藏一个元素时需要用足够大的“负值”来实现，如下

.hidden{
  position: absolute;
  left: -9999px; /*负值不会影响滚动条*/
  top: -9999px;
}

回到这里，我们需要看实际需求，我之前碰到一种情况是，想用绝对定位做个兜底背景色，如果是这种情况，可以用box-shadow的方式来实现，这种是不占空间的

div{
  box-shadow: 0 99vh 0 99vh red;
}

换个思路，不一定需要绝对定位来实现