容器要重叠父容器

Question

我有两个divs在彼此的内部。一个#outside有一个5px border，第二个#inside有它的内容。我希望#inside在顶部和底部重叠#outside，这样它就可以有效地打破边框，如果这样做有意义的话，它看起来应该是2个方括号。

 <div id='outside'>
      <div id='inside'>
           <h1>Sample header</h1>
           <p>Sample copy</p>
      </div> <!-- inside -->
 </div> <!-- outside -->

CSS

 #outside {
      border: 5px solid #000;
      padding: 5px;
 }

我不太知道如何将#内部div移动到外部div，任何建议都会有帮助！

Answer 1

现在，您可以习惯于此设计的position。

像这样的，

#outside {
      border: 5px solid #000;
      padding: 5px;
  position:relative;
 }

#inside{
background:red;
  position:absolute;
  top:-10px;
    left:10px;
  right:10px;
}

http://tinkerbin.com/siCmzU5Y

DEMO2

Answer 2

向内部添加负边距。

概念：

#inside {
    width:   110%;
    height:  110%;
    margin-top: -10%;
    margin-left: -10%;
}

或制作外部position: relative;并使用top: -10px; left: -10px;制作内部position: absolute;

Answer 3

http://jsbin.com/enabeb/1/edit

<div class="outer"> 
    <div class="inner"></div>
  </div>

.outer{
  height:400px;
  width:400px;
  background:#DDD;
  border:8px solid #333;
}
.inner{
  height:416px;
  margin:-8px auto 0 auto;
  width:380px;
  background:#DDD;
}

虽然这是你所要求的，但我不认为这是你想要做的最好的方法。