40

私は2つのdivを持っており、一方はもう一方の中にネストされています。ページデザインによると、ネストされたdivは、次のように親divの「上」にあるように見える必要があります：（ソース：cloudfront.net）
この画像

ネストされたdivの負の上部マージンを使用して、両方の要素に対してCSSをコーディングし、目的の効果をシミュレートしようとしています。ただし、次のように、親の境界の外側に表示される代わりに、ネストされたdivの上位10px程度が切り捨てられます：（ソース：cloudfront.net）
この画像

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

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

2 に答える 2

59

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

この場合、marginおそらくベストプラクティスではないでしょう。

position:relativeネストされたに追加して、必要な数値にdiv設定するだけです。topあなたの場合、それはおそらくマイナスになるでしょう。

このフィドルをチェックしてください。

于 2013-01-18T23:16:37.383 に答える