Question

我已经搜遍了Stackoverflow，到目前为止还没有解决方案。我需要一个快速提示或帮助，以便弄清楚如何堆叠div id＆＃34; top_section＆＃34;关于div id＆＃34; middle_section＆＃34;。现在＆＃34; middle_section＆＃34;位于＆＃34; top_section＆＃34;当它真的应该在右下方的位置＆＃34; top_section＆＃34;结束是＆＃34; middle_section＆＃34;应该开始。

继承HTML

<!DOCTYPE html>

<html>
</head>
<link rel="stylesheet" href="css/main.css">

 </head>

 <body>
  <div id="wrapper">
    <div id="top_section">
     <div class="content_wrapper">

        <section id="td_left">
            <h1>XYZ</h1>
        </section>
        <section id="td_right"></section>
      </div>
    </div>

    <div id="middle_section">
        <div class="content_wrapper">
            <h1>Stuff</h1>
        </div>
    </div>

    <div id="bottom_section"></div>
  </div>

继承人CSS：

.content_wrapper {
 width: 1100px;
 margin: 0 auto;
 background: red; }

 header {
  background: blue; }
  header img {
  width: 14%;
  margin: 0 auto 0 auto; }

 .sections, #top_section, #middle_section {
  width: 100%;
  position: absolute;
  float: left; }

  #top_section {
   height: 80.3%;
   background: #34495D; }

   #middle_section {
    height: 70.3%;
    background: #21303F; }

Answer 1

更改

.sections, #top_section, #middle_section {
    width: 100%;
    position: absolute;
    float: left; 
  }

到

.sections, #top_section, #middle_section {
    width: 100%;
    position: relative;
    display: block;
    clear: both
 }

Answer 2

使用“top”来定义该部分的起始位置。不要忘记，如果你把它们相加，你的部分的高度必须是100％或更低。

#top_section {
   top: 0%
   height: 20%;
   background: #34495D; }

  #middle_section {
   top: 20%;
   height: 80%;
   background: #21303F; }

Answer 3

您只需摆脱position: absolute。

所以你的代码会有

sections, #top_section, #middle_section {
    width: 100%;
    float: left; }

而不是

.sections, #top_section, #middle_section {
    width: 100%;
    position: absolute;
    float: left; 
  }

Heres' a fiddle

如何将这些div叠加在一起？

3 个答案: