html - 如何让这些 div 垂直堆叠？

标签 html css

我知道以前有人问过类似的问题，但我已经尝试了所有我能找到的解决方案(其中涉及外部 div 上的position:relative位置和内部 div 上的position:absolute)但我终生不能我让红色的 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;
}

Here's the jsFiddle link.

谢谢!

最佳答案

要让红色 div 显示在绿色 div 下方，请执行以下操作