將元素定位到特定大小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