为什么我的div彼此重叠？

Question

为什么我首页顶部的div大约不长？ divs不应该是块级元素，并且不能互相重叠吗？我基本上尝试过所有促使“约长” div阻塞，内联，块内联的事情，但都尝试了清楚：两者均无济于事。.在过去的几天里，我一直坚持这样做。

这是代码 （html / css）

@import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
    overflow-x: auto;
    height: 100%;
}

body {
    background-image: url('https://images.unsplash.com/photo-1527153818091-1a9638521e2a?ixlib=rb-1.2.1&auto=format&fit=crop&w=858&q=80');
    background-size: cover;
    height: 100vh;
    padding: 0;
    margin: 0;
    font-family: 'Varela Round', sans-serif;
  }
  
  .header {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    background-color: transparent;
    position: fixed;
    height: 60px!important;
    overflow: hidden;
    z-index: 10;
  }
  
  .main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
  }
  
  .mainInner {
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
  }
  
  .mainInner div {
    display: table-cell;
    vertical-align: middle;
    font-size: 3em;
    font-weight: bold;
    letter-spacing: 1.25px;
  }
  
  #sidebarMenu {
    height: 100%;
    position: fixed;
    right: 0;
    width: 250px;
    margin-top: 60px;
    transform: translateX(+250px);
    transition: transform 250ms ease-in-out;
    background: transparent;
  }
  
  .sidebarMenuInner {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }
  
  .sidebarMenuInner li {
    list-style: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  
  .sidebarMenuInner li span {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.50);
  }
  
  .sidebarMenuInner li a {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
  }
  
  input[type="checkbox"]:checked~#sidebarMenu {
    transform: translateX(0);
  }
  
  input[type=checkbox] {
    transition: all 0.6s;
    box-sizing: border-box;
    display: none;
  }
  
  .sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 22px;
    right: 25px;
    height: 22px;
    width: 22px;
  }
  
  .spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #fff;
  }
  
  .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
  }
  
  .diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
  }
  
  .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
  }
  
  input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
  }
  
  input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
  }
  
  input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
  }
  
  input[type=checkbox]:checked~.sidebarIconToggle~a>.logo-header {
    left: 0%;
    transition: all 0.3s;
  }
  /* Top menu */
  .topMenu{
    list-style:none;
    float:right;
    color:#fff;
    margin-right: -270px;
    transform: translateX(+550px);
    transition: transform 250ms ease-in-out;
    z-index: 105;
  }
  .topMenu li{
    display:inline;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
  }
  input[type="checkbox"]:checked~.topMenu {
    transform: translateX(0);
  }
  
  input[type=checkbox]:checked~.sidebarIconToggle~.topMenu {
    margin-right: 70px;
    transition: all 0.3s;
  }
  
  .logo-header {
    transition: all 0.3s;
    width: 50px;
    position: absolute;
    left: 40%;
    top: 5px;
    z-index: 100;
  }


.form-1 {
  position:absolute;
  right:10%;
  top:38%;
}

#offer {
  width:100%;
  background-color:white;
  height:768px;
  clear:both;


}

<body>
<div class="header"></div>
          <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
          <label for="openSidebarMenu" class="sidebarIconToggle">
      <div class="spinner diagonal part-1"></div>
      <div class="spinner horizontal"></div>
      <div class="spinner diagonal part-2"></div>
  </label><a href=""><span class="logo-header">
  <img src="http://pomma89.altervista.org/troschuetz.random/logo-128.png"> </span> </a>
          <ul class="topMenu">
                <li><a href="" target="">Strategy</a></li>
                <li><a href="" target="">Web Design</a></li>
                <li><a href="" target="">UX</a></li>
                <li><a href="" target="">Marketing</a></li>
                <li><a href="" target="">About</a></li>
                <li><a href="" target="">Contact</a></li>
            </ul>
<div id="sidebarMenu">
            <ul class="sidebarMenuInner">
                <li><a href="" target="">Facebook</a></li>
                <li><a href="" target="">Twitter</a></li>
                <li><a href="" target="">Instagram</a></li>
                <li>Blog<span>Follow us on Socials</span></li>
             </ul>
</div>

     
<div class="form-1">
      <form class="contact100-form validate-form">
        <span class="contact100-form-title">
          Start getting results 
        </span>
    
                      <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
                        <input class="input100" type="text" name="name" placeholder="Enter your name">
                      </div>
                
                      <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate = "Name is required">
                        <input class="input100" type="text" name="email" placeholder="Company name">
                      </div>
                
                      <div class="wrap-input100" data-validate = "Valid email is required: ex@abc.hyz">
                        <input class="input100" type="text" name="email" placeholder="Email">
                      </div>
  
                  <div class="container-contact100-form-btn">
                    <div class="wrap-contact100-form-btn">
                      <div class="contact100-form-bgbtn"></div>
                      <button class="contact100-form-btn">
                        Submit
                      </button>
                    </div>
                  </div>
      </form>  
 </div>   
    
<!--About-->
<div class="about-long">
    <div id="offer">
    <h2>Dunno What to <span>put here</span></h2>
    <div class="grid">
        <div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per, his ad regione singulis scriptorem. Sit an erroribus adipiscing. No amet ridens pri, duo persecuti adolescens no. 1</div>
        <div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per, his ad regione singulis scriptorem. Sit an erroribus adipiscing. No amet ridens pri, duo persecuti adolescens no. 2</div>
        <div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per, his ad regione singulis scriptorem. Sit an erroribus adipiscing. No amet ridens pri, duo persecuti adolescens no. 3</div>
        <div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per, his ad regione singulis scriptorem. Sit an erroribus adipiscing. No amet ridens pri, duo persecuti adolescens no. 4</div>
      </div>
 









</div>















  </div>
</body>

提前谢谢！

Answer 1

about-long的所有先前同级都位于fixed或absolute的位置（我想您以错误的方式关闭了header，因为它是空的）。

因此，由于它们全部不在静态流中，因此最后一个元素的起始位置（默认为static位置）位于页面顶部