将元素定位到特定容器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