css - 将元素定位到特定的容器 CSS

Question

我有 3 个容器。

黄色框是标准 HTML

棕色框是 HTML 中的一个容器

红框是另一个容器，出现在 HTML的最底部。

我无法更改任何HTML，因为它是通过 PHP 的readfile. 但是，我可以将 CSS 添加到黄色框中。

我想将红色盒子放置在棕色盒子内，如下所示。

Answer 1

你试过position: absolute红盒子吗？

就像是：

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

（数字需要调整......）

Answer 2

像这样

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