Question

我知道之前已经提出了类似的问题，但我已经尝试了所有我能找到的解决方案（涉及位置：相对于外部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;
}

Here's the jsFiddle link.

谢谢！

Answer 1

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

从"position: absolute;"和#main_div

#title_div

将"float: left;"添加到#main_div和#title_div

这将导致每个div尽可能向左拉。如果它们不能并排放置，第二个会自动推到第一个下方。

Answer 2

你对两个内部div都有相同的绝对顶部位置。有很多方法可以改变这一点，包括允许div的自然排序，改变顶部位置等。

如何让这些div垂直堆叠？

2 个答案: