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

Question

2つのdivがあり、一方が他方の内部にネストされています。ページ設計に従って、ネストされたdivは、次のように親divの「上」にあるように見える必要があります。

ネストされたdivの負の上マージンを使用して、目的の効果をシミュレートするために、両方の要素にCSSをコーディングしました。ただし、次のように、ネストされたdivの上位10ピクセル程度は、親の境界の外側に表示される代わりに切り取られます。

このページの目標は、要素をレスポンシブにすることなので、要素を絶対に配置したくありません。

DivのHTML：

<div class="container-div">
  <div class="child-div">
    ...
  </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親は完璧にそれをしたでしょう！