我知道以前也有人问过类似的问题，但我已经尝试了所有我能找到的解决方案（包括位置：外部 div 上的相对位置和内部 div 上的位置：绝对），但我一辈子都做不到红色 div 在绿色下面对齐，而不是堆叠在上面。
HTML：
<body>
<div id="outer_div">
<div id="title_div">
</div>
<div id="main_div">
</div>
</div>
</body/>
CSS：
body {
height: 1000px;
width: 1000px;
margin: 0;
padding: 0;
}
#outer_div {
position: relative;
height: 100%;
width: 100%;
background-color: blue;
display: block;
}
#title_div {
top: 0;
left: 0;
position: absolute;
height: 25%;
width: 100%;
background-color: green;
display: block;
}
#main_div {
top: 0;
left: 0;
position: absolute;
height: 20%;
width: 100%;
background-color: red;
display: block;
}
谢谢！