Html CSS：强制div重叠它下面的内容

我试图用HTML和CSS模拟音频编辑器。音频编辑器通常有一个播放头，它与它下面的所有曲目重叠。我很难重新创建playhead，因为我无法解决如何强制它重叠所有轨迹

下面的代码段是我当前的设置。虽然只要不向下滚动，它看起来很好，但如果文档向下滚动，则播放头不会与它下面的曲目重叠

我试图强制

#playhead

div与所有

曲目

div重叠

我不想使用

position:fixed

，因为这意味着如果文档向右滚动，则播放头不会保持在正确的位置

任何帮助都将不胜感激

#playhead{
背景色：白色；
高度：100vh；
左：64px；
位置：相对位置；
宽度：2倍；
}
#播放列表{
宽度：1024px；
}
#时间线{
背景颜色：绿色；
高度：16px；
}
.赛道{
背景色：黑色；
边框底部：1px纯色灰色；
高度：64px；
}

---

如果您希望在滚动曲目时绿色条始终位于顶部，请将所有曲目嵌套在一个div中，并使其溢出：auto；并将时间线定位为绝对的

#playhead{
背景色：白色；
高度：100vh；
左：64px；
位置：相对位置；
宽度：2倍；
}
#播放列表{
宽度：1024px；
位置：相对位置；
}
#时间线{
背景颜色：绿色；
高度：16px；
位置：绝对位置；
宽度：100%；
}
.轨道{
高度：100vh；
溢出：自动；
}
.赛道{
背景色：黑色；
边框底部：1px纯色灰色；
高度：64px；
}

---

如果您希望在滚动曲目时绿色条始终位于顶部，请将所有曲目嵌套在一个div中，并使其溢出：auto；并将时间线定位为绝对的

#playhead{
背景色：白色；
高度：100vh；
左：64px；
位置：相对位置；
宽度：2倍；
}
#播放列表{
宽度：1024px；
位置：相对位置；
}
#时间线{
背景颜色：绿色；
高度：16px；
位置：绝对位置；
宽度：100%；
}
.轨道{
高度：100vh；
溢出：自动；
}
.赛道{
背景色：黑色；
边框底部：1px纯色灰色；
高度：64px；
}

---

您可以将

#playhead

的高度设置为极高的值（在我的示例中为10000px），并应用

高度：100%；和溢出y：隐藏；到

#播放列表

。这样一来，playhead线将跨越整个高度（甚至更高），但其跨越容器的垂直延伸（

#playlist`）将被切断

#playhead{
背景色：白色；
高度：10000px；
左：64px；
位置：相对位置；
宽度：2倍；
}
#播放列表{
宽度：1024px；
身高：100%；
溢出y：隐藏；
}
#时间线{
背景颜色：绿色；
高度：16px；
}
.赛道{
背景色：黑色；
边框底部：1px纯色灰色；
高度：64px；
}

---

您可以将

#playhead

的高度设置为极高的值（在我的示例中为10000px），并应用

高度：100%；和溢出y：隐藏；到

#播放列表

。这样一来，playhead线将跨越整个高度（甚至更高），但其跨越容器的垂直延伸（

#playlist`）将被切断

#playhead{
背景色：白色；
高度：10000px；
左：64px；
位置：相对位置；
宽度：2倍；
}
#播放列表{
宽度：1024px；
身高：100%；
溢出y：隐藏；
}
#时间线{
背景颜色：绿色；
高度：16px；
}
.赛道{
背景色：黑色；
边框底部：1px纯色灰色；
高度：64px；
}

您是否试图使playhead始终显示在屏幕上？类似于使用

position:absolute

？在

#timeline

元素中包含

#playhead

元素是否至关重要？如果他们是兄弟姐妹，你可以单独控制他们，这可能会更容易…@NidhinJoseph

position:absolute

给出了与

position:relative

相同的结果-我主要是想弄清楚如何强制高度覆盖地面divs@AlexanderNied它可以在外面，只要它在

#播放列表

里面，你呢想让游戏玩家永远出现在屏幕上吗？类似于使用

position:absolute

？在

#timeline

元素中包含

#playhead

元素是否至关重要？如果他们是兄弟姐妹，你可以单独控制他们，这可能会更容易…@NidhinJoseph

position:absolute

给出了与

position:relative

相同的结果-我主要是想弄清楚如何强制高度覆盖地面divs@AlexanderNied它可以在外面，只要它在播放列表中就行了很好，但是使用

position:fixed

会切断第一个音轨的顶部。有可能避免切入该分区吗？@MysteryPancake我没有使用

位置：已修复
。我在timeline上使用了
position:relative
，在playhead上使用了
absolute
。@对不起，我的错误-
position:relative
仍然会切断第一首音轨的顶部-如果第一首
音轨中有文本，文本将明显被切断。有什么方法可以避免这种情况吗？似乎将
时间线上的
位置：绝对
更改为
位置：相对
，解决了这个问题。非常感谢你的回答！！这非常有效，但是使用
位置：fixed
会切断第一个轨迹的顶部。有可能避免切入该分区吗？@MysteryPancake我没有使用
位置：已修复
。我在时间轴上使用了
position:relative
，在pl上使用了
absolute