重叠父容器的容器

我在两个内部有两个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; 
}

我不完全知道如何在外面的div移动#inside DIV，任何建议将帮助！

来源

2012-11-20 mauzilla

我不太清楚WHA你是说。但是如果你想打破边界的顶部和底部，你可以使用'border-left：5px solid＃000; border-right：5px solid＃000'。如果这就是你想要的东西... – CaptainCarl

你想要一个负边界。 – mowwwalker

hi @Mauritz Swanepoel我想你想要这个http://tinkerbin.com/HfZV7G5f –

现在你可以使用position这种设计

因为这样

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

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

Demo1

DEMO2

来源

2012-11-20 09:19:20

添加切缘阴性里面..

理念：

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

还是让外界position: relative;，使内部position: absolute;与top: -10px; left: -10px;

来源

2012-11-20 09:07:10

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

虽然这是你问什么，我不相信这是做你想要做什么是最好的方式。

来源

2012-11-20 09:12:57 mowwwalker

重叠父容器的容器

回答

相关问题