css - 2 つの div を別の div の隅に浮かせる

Question

これが私が必要とするものです。ほとんどのコンテンツが含まれるメイン div があります。コンテンツの量がわからないので、メイン div の高さ (たとえば、px) を推測することはできません。私がする必要があるのは、2 つの div (特定の固定サイズ) をメイン div の左上隅 (もちろんメイン div よりも大きい z-index) と右下隅の上に立てることです。同じdivの。これを達成する方法が本当にわかりません: 誰か教えてもらえますか??

どうもありがとうございました！

マッテオ

Answer 1

メインのdiv位置を相対に設定し、2つの「コーナー」オーバーレイを絶対に配置するだけです。1つは上と左が0、もう1つは下と右が0です。コーナーをオーバーラップする必要がある場合は、次のようになります。負の値で動作するようにします（例：上：-5px;左：-5px;）。

/* The required CSS rules */
#container {
  position:relative;
}

.tl,.br {
  position:absolute;
}

.tl {
  left:0;
  top:0;
}

.br {
  right:0;
  bottom:0;
}

そしてここにHTMLコード：

<div id="container">
  <div class="tl"></div>
  <div class="br"></div>
</div>

こちらをご覧ください。