Html 是否将div定位在溢出卷轴外部而不使用绝对定位？

我正在制作一个简单的博客主题，我希望有一个小框，在每个帖子的左边显示帖子日期，如下所示：

但是，post的容器有一个overflow-y设置为滚动，并且将timestamp div附加到每个post不会显示，因为它被溢出隐藏了。如果我将timestamp div设置为position:absolute，我可以绕过这个问题，但是它不会与post保持一致，而是固定在一个地方

下面是一个简单的例子：

#左撇子{
宽度：100px；
高度：500px；
背景：绿色；
浮动：左；
}
#rightCol{
宽度：400px；
高度：500px；
背景：橙色；
溢出y：滚动；
浮动：左；
}
.内容{
高度：700px；
宽度：100%；
背景：红色；
}
.盒子{
宽度：100px；
高度：100px；
背景：紫色；
左边距：-50px；
}
鱼

我试图做的是使紫色框（.box）显示在其容器（.content）外部，并显示在绿色区域中，而不将其设置为固定位置，以便它仍然与内容一起滚动。

如果将

#leftCol

与

#rightCol

重叠（通过将它们的

绝对

定位到其父容器的

左侧：0；

），将左边距设置为左列的宽度，然后将

内容
位置设置为
相对
，框位设置为
绝对
，并使用
左侧
调整定位

以下是更新后的CSS：

#leftCol{
    position:absolute;
    width: 100px;
    height: 500px;
    background: green;
    left:0;
}
#rightCol{
    position:absolute;
    padding-left:100px;
    width: 400px;
    height: 500px;
    overflow-y: scroll;
    left:0;
}
.content{
    height: 700px;
    width: 100%;
    background: red;
    position:relative;
}
.box{
    width: 100px;
    height: 100px;
    background: purple;
    position:absolute;
    left:-100px;
}

和

希望这有帮助=）
您可以围绕实际内容创建另一个div，然后将其浮动到框旁边。
这样地
这样做的缺点是，您必须指定内容的宽度，以便它填充所有宽度

<div id="rightCol">
    <div class="content">
        <div class="box"></div>
        <div class="content_text">
            Fish
        </div>
    </div>
</div>

html{
溢出-x:隐藏；}

身体{
overflow-x:hidden；}
我对它进行了尝试，但我不确定这是否是您想要的答案：我想要这个，但我想要紫色框与内容保持一致，在本例中为“Fish”。我想我应该添加另一个元素来象征一篇文章。
<div id="rightCol">
    <div class="content">
        <div class="box"></div>
        <div class="content_text">
            Fish
        </div>
    </div>
</div>

.content_text{
    height: 700px;
    background: red;
    width: 335px;
    float:left;
}
.box{
    width: 100px;
    height: 100px;
    background: purple;
    margin-left: -50px;
    float:left;
}