css - 容器重叠父容器

Question

我在彼此内部有两个 div。第一个 #outside 有一个 5px 边框，第二个 #inside 有内容在里面。我希望 #inside 在顶部和底部重叠 #outside 以便它有效地打破边界并出现是 2 个括号，如果这有意义的话。

HTML

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

我不太清楚如何将 #inside div 移动到外部 div 上，任何建议都会有所帮助!

Answer 1

现在你可以为这个设计使用定位

像这样

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

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

Demo1

DEMO2