html - 親 div の左上隅と右下隅の div

Question

最初の div を親 div の左上に、2 番目の div を親 div の右下に配置します。これが私のコードです！

<div class="parent"> 
<div class="tl">TopLeft</div>
<div class="br">BottomRight</div>
</div>

ここに私のcssがあります、

  .parent
    {
        width: auto;
        height:300px;
        background: Black;
    }

  .tl
  {
  width:100px;
  height:40px;
  background:Aqua;
  }

 .br
  {
  position:absolute;
  width:100px;
  height:40px;
  right:0;
  bottom:0;
  background:Aqua;
  }

私のコードでは、 topLeft div は正しい位置にありますが、右下の div は親 div の外にあります。コードに必要なものを知りたい!

ここにフィドルがあります！

Answer 1

親要素の位置プロパティを相対に設定する必要があります。これにより、子はドキュメントではなく親に対して正しく配置されます。

.parent {
    ...
    position: relative;
}

例: http://jsfiddle.net/grc4/dQCpy/1/

Answer 2

.parent
{
    width: auto;
    height:300px;
    background: Black;
    position:relative;
}

親には相対位置が必要です。

Answer 3

<style>
.parent{
background-color: yellow;width: 500px;
}

.tl{
background-color: yellowgreen;float: left;width: 200px;
}
.br{
background-color: wheat;float: right;width: 100px;
}
.clr{
clear:both;
}
</style>

<div class="parent"> 
<div class="tl">TopLeft</div>
<div class="clr"></div>
<div class="br">BottomRight</div>
<div class="clr"></div>
</div>