CSS - 重叠div的定位

Question

我需要创建以下布局： 有一个容器可以保存站点的所有内容，容器需要在浏览器窗口中居中。容器具有非固定高度，因为它需要随内容物扩展。在容器内部将有另一个div保存实际的页面内容。

然后我的问题，我需要一个特殊的div，它与容器div的左边界重叠，因为这将是一个非常特殊的边框（不建议使用任何css边框属性）。

可以使用Javascript更改重叠div的高度（并且您不需要告诉我如何）。但我希望只在html和css中完成定位。我将非常感谢所有的建议。

Answer 1

信息不够......但也许是这样......

#overlap_div{
  position:absolute; z-index:9; left:0px, top: 0px;
}

并制作参考position:relative

的容器

Answer 2

很无聊，所以决定练习，Heres a DEMO

<div id="container">
    <div id="content">
    <p>  Hey I am the content</p>
      <p>  Hey I am the content</p>
          <p>  Hey I am the content</p>
          <p>  Hey I am the content</p>
          <p>  Hey I am the content</p>
          <p>  Hey I am the content</p>
          <p>  Hey I am the content</p>
    </div>  
    <div id="special">

    </div>

</div>

#container {background: orange;
width:50%;
margin:0 auto;
padding: 10px 30px;
position:relative}

#content { background: brown}

#special {position:absolute;
    top:0;
    left: -30px;
    width: 60px;
    background: red;
}


var height= $("#container").css("height");
height = height.replace("px","");
height = parseInt(height) + 20;

$("#special").css("height",height);