javascript - 绝对定位而不扩展父对象

我正在尝试在具有其他元素的div元素中定位“搜索者”。我希望搜寻器能够在内容div的顶部移动，而不会在周围推其他内容，同时还能跟随滚动条。该区域可调整大小，因此我不能使用恒定的宽度/高度。就像视频编辑器中的搜寻者一样。

这是我到目前为止所得到的

#container {
  width: 200px;
  height:100px;
  background-color: gray;
  overflow: scroll;
}

#content {
  width: 300px;
  height: 120px;
}

#box {
  width: 40px;
  height: 40px;
  background-color: green;
}

#seekerContainer {
  position: relative;
  width: 100%;
  height: 100%;
}

#seeker {
  width: 4px;
  height: 100%;
  position: relative;
  background-color: blue;
  left: 10%;
}

<div id="container">
  <div id="content">
      <div id="seekerContainer">
        <div id="seeker"></div>
    </div>

    <div id="box"></div>
  </div>
</div>

而且我尝试了将seekerContainer和seeker定位为绝对/相对位置的不同组合，但无论是seeker不会跟随滚动，还是会扩展div的高度。

有任何解决方法吗？

最佳答案

我认为这是您要寻找的：

.container {
  width: 200px;
  height: 100px;
  background-color: gray;
  overflow: scroll;
}

.content {
  height: 500px;
  position: relative;
}

.box {
  width: 40px;
  height: 40px;
  background-color: green;
}

.seeker {
  width: 4px;
  height: 100%;
  position: absolute;
  background-color: blue;
  left: 10%;
  top: 0;
}

<div class="container">
  <div class="content">
    <div class="seeker"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

另外，您不想在每个元素上都放置id并使用id进行样式设置。您应该使用classes。元素的ID在页面中必须是唯一的，因此当您需要将相同的样式应用于更多元素时，它并不是很有用。