Question

我正在创建一个简单的博客主题，我希望在每个帖子的左侧偏移中设置一个显示发布日期的小框，如下所示：http://s21.postimg.org/fjygwqw1z/timestamp_Mockup.png

然而，帖子的容器有一个溢出-y设置滚动，并且时间戳div附加到每个帖子将不会显示，因为它被溢出隐藏。如果我将timestamp 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 { overflow-x：hidden; }

body { overflow-x：hidden; }

在不使用绝对定位的情况下将div定位在溢出滚动之外？

3 个答案: