Javascript 无需扩展父对象的绝对定位

我试图在一个包含其他元素的div元素中定位一个“搜索者”。我希望搜索者能够在内容div的顶部移动，而无需推送其他内容，同时也可以跟随滚动条。该区域可调整大小，因此无法使用恒定的宽度/高度。就像视频编辑器中的探索者一样

这就是我目前所得到的

#容器{
宽度：200px；
高度：100px；
背景颜色：灰色；
溢出：滚动；
}
#内容{
宽度：300px；
高度：120px；
}
#盒子{
宽度：40px；
高度：40px；
背景颜色：绿色；
}
#seekerContainer{
位置：相对位置；
宽度：100%；
身高：100%；
}
#探索者{
宽度：4px；
身高：100%；
位置：相对位置；
背景颜色：蓝色；
左：10%；
}

---

我想这就是你想要的：

.container{
宽度：200px；
高度：100px；
背景颜色：灰色；
溢出：滚动；
}
.内容{
高度：500px；
位置：相对位置；
}
.盒子{
宽度：40px；
高度：40px；
背景颜色：绿色；
}
.探索者{
宽度：4px；
身高：100%；
位置：绝对位置；
背景颜色：蓝色；
左：10%；
排名：0；
}