CSS - div 停靠到包装器外部的另一个 div

Question

我有两个 div，都向左浮动。 “左”div 将是页面的左列。 “右”div 将是主要内容。

HTML:

<div id="wrapper">
    <div id="content">
        <div id="left">
        </div>

        <div id="right">
        </div>

        <div id="docked_div">
        </div>
    </div>
</div>

CSS:

#wrapper {
    margin: 0 auto;
    margin-top: 35px;
    width: 1005px;
}

#content {
    overflow: hidden;
    background-color: white;
}

#left {
    float: left;
    width: 250px;
    background: red;
}

#right {
    float: left;
    background: blue;
}

这很好用。现在我有了名为 docked_div 的第三个 div。这个 div 应该在包装器之外，位于 right div 的右侧(距离 right div 顶部大约 20px)。 因此，黑色 div 现在位于左侧，但它应该位于右侧且位于 wrapper 之外。

我尝试过以不同的方式将位置设置为相对或绝对，但我无法获得 我想要的结果。我对创建布局的 CSS 知识不多，因此，如果有任何建议和指导，我将不胜感激。

这是完整的例子: http://jsfiddle.net/TA7Rh/

Answer 1

我觉得这行得通

#wrapper {
    margin: 0 auto;
    margin-top: 35px;
    width: 1005px;
    position: relative;
}

#docked_div {
    /*background: url(../images/mazais_fons.png);*/
    background-size: 100%;
    width: 53px;
    height: 212px;
    position: absolute;
    right:-60px;
}

jsFiddle Link

根据您的要求更改正确的位置。