css - 要素を特定のコンティナー CSS に配置する

Question

私は3つのコンテナを持っています。

黄色のボックスは標準の HTML です

茶色のボックスは HTML 内のコンテナです

赤いボックスは、HTML の一番下に表示される別のコンテナーです。

HTML は PHP 経由で処理されているため、変更できませんreadfile。ただし、黄色のボックスに CSS を追加することはできます。

以下に示すように、茶色のボックスの内側に赤いボックスを配置したいと思います。

Answer 1

このように

HTML

<div class="yellow">

  <div class="brown"></div>

  <div class="red"></div>

</div>

CSS

.yellow{
background:yellow;
  width:300px;
  height:300px;
  margin-top:100px;
  overflow:hidden;
position:relative;
}

.brown{
background:pink;
  width:200px;
  height:200px;
  margin:0 auto;
  margin-top:50px;
}
.red{
background:red;
  width:180px;
  height:180px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-90px;
  margin-left:-90px;

}

ライブデモhttp://tinkerbin.com/zdaCyo5l

Answer 2

position: absolute赤い箱は試着しましたか？

何かのようなもの：

#red-box {
    position: absolute;
    top: 100px;
    left: 60px;
    width: 200px;
    height: 80px;
}

（数値は微調整が必​​要です...）