CSS：ネストされた要素を親要素の境界の少し外側に配置します

Question

2つのdivがあります。ページデザインによれば、ネストされたdivは、this imageのように、親divの「上に」表示される必要があります。

ネストされたdivにネガティブなマージンを使用して、目的の効果をシミュレートしようとすると、両方の要素にCSSがコーディングされています。しかし、親の境界の外に出現する代わりに、this imageのように、ネストされたdivの上位10px程度が途切れています。

このページの目標は応答性が高いため、要素を絶対的に配置したくありません。

HTMLのdivのために：divのための

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

はCSS：

.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

あなたは、ネストされたdivにposition:absoluteを適用する必要はありません。

marginは、この場合はおそらくベストプラクティスではありません。

ネストしたdivにposition:relativeを追加して、それにtopを任意の数に設定してください。あなたの場合、それはおそらく否定的です。

親にthis Fiddle.

Answer 2

overflow: hiddenをチェックアウトは完全にそれを行っているだろう！