CSS：定位嵌套元素稍微超出父元素的邊界

Question

我有2個div，一個嵌套在另一個裏面。根據頁面設計，嵌套的div需要顯示爲「在父div上」，如this image。

我已經爲這兩個元素編碼了CSS，在嵌套div上使用了一個負的上邊距來嘗試模擬所需的效果。但是，除了出現在父級邊界之外，嵌套div的頂部10px左右被截斷，如this image。

我不想絕對定位元素，因爲此頁面的目標是響應。

的HTML的div：

<div class="container-div"> 
    <div class="child-div"> 
    ... 
    </div> 
</div> 

對CSS的div：

.container-div { 
    padding: 10px 10px 0; 
} 

.child-div { 
    display: inline-block; 
    width: 100px; 
    height: 60px; 
    margin: -15px 10px 0; 
    border: 1px solid #efefef; 
    background-color: #fff; 
} 

Answer 1

你不需要申請position:absolute到嵌套div。

而margin可能不是這種情況下的最佳做法。

只需將position:relative添加到嵌套的div，並將其設置爲top即可。就你而言，這可能是負面的。

退房this Fiddle.

Answer 2

overflow: hidden父本來完全可以做到的吧！