css - 与父容器重叠的容器

Question

我有两个divs在彼此里面。一个#outside有一个5px border，第二个#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

在里面添加负边距..

概念：

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

或者在外面position: relative;制作并在里面position: absolute;制作top: -10px; left: -10px;

Answer 2

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

虽然这是您所要求的，但我认为这不是做您想做的事情的最佳方式。

Answer 3

现在你可以习惯position这个设计了

像这样

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

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

演示1

演示2

Answer 4

我的手机（和几个朋友的）没有正确处理负边距。position: absolute 在内部 div 上，适当的大小/填充/边框在我签入的每个浏览器的桌面、手机和平板电脑上都能正常工作。