Html CSS-重叠div的定位

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

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

---

可以使用Javascript更改重叠div的高度，而无需向我演示如何更改。但是我希望定位只在html和css中完成。我将非常感谢所有建议

信息不足。。但也许像这样的事情

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

---

并做出容器的参考位置：相对

被钻孔，所以决定练习，这里有一个

---

如果您发布到目前为止的代码，并在类似的网站上展示该代码的演示，您将获得更快的帮助。另外，请解释一下你的边框有什么特别之处，它不能被呈现为边框。Div不是背景吗？当没有显示代码时，它会让人觉得你只是想让别人帮你做作业。如果不是这样的话，恕我冒犯，但你们肯定能理解。谢谢你们。我得到了一个答案，这个答案应该足以让我成功。它非常接近我使用的代码，但我现在不知道为什么我没有让它工作。是的，我很抱歉没有发布我的代码。我真是太蠢了，下次我会记住的。我也明白，我似乎在试图让别人做我的家庭作业。我现在主要学习电子和一些计算机技术，不过别担心，你根本没有帮我做任何家庭作业；谢谢这和我试过的很相似。不知道为什么我的代码不起作用。但是我现在应该可以让它工作了。

<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);