html - 将div定位在溢出滚动之外而不使用绝对定位？

Question

我正在制作一个简单的博客主题，我想要一个小框显示每个帖子的左偏移量的帖子日期，如下所示：http ://s21.postimg.org/fjygwqw1z/timestamp_Mockup.png

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

这是一个简单的例子：http: //jsfiddle.net/MeVwt/

<style>
#leftCol{
    width: 100px;
    height: 500px;
    background: green;
    float: left;
}
#rightCol{
    width: 400px;
    height: 500px;
    background: orange;
    overflow-y: scroll;
    float: left;
}
.content{
    height: 700px;
    width: 100%;
    background: red;
}
.box{
    width: 100px;
    height: 100px;
    background: purple;
    margin-left: -50px;
}
</style>

<div id="leftCol">
</div>

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

</div>

我想要做的是让紫色框（.box）显示在其容器（.content）之外并出现在绿色区域而不将其设置为固定位置，因此它仍会随内容滚动。

Answer 1

如果将#leftCol与重叠#rightCol（通过将它们定位absolute到left:0;其父容器的位置），请将左边距设置为左列的宽度，然后将.content位置设置为relative并将框位置设置为absolute，并使用 调整定位left。

这是更新后的 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;
}

和一个DEMO

希望这会有所帮助=)

Answer 2

您可以围绕实际内容创建另一个 div，然后将其浮动到框旁边。像这个http://jsfiddle.net/MeVwt/3/这样 的缺点是您必须指定内容的宽度才能填充所有宽度。

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

CSS：

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

Answer 3

html {溢出-x：隐藏；}

身体 { 溢出-x：隐藏；}