Почему мои дивы идут друг на друга?

Question

Почему div "about-long" находится в верхней части моей домашней страницы?Разве div не должны быть элементами блочного уровня и не перекрывать друг друга?Я пытался в основном все, изменяя "about-long" div, чтобы блокировать, inline, block-inline, пытался ясно: и то, и другое ничего не работает .. Я застрял на этом в течение последних нескольких дней.(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) является верхней частью страницы