重疊父容器的容器

我在兩個內部有兩個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

重疊父容器的容器

回答

相關問題