title: CSS: Nav bar delays div
body: <p>Hello I just started with HTML &amp; CSS and I am currently working on my first website. I have the problem that my nav bar delays the div below it when the div (called Start) is set to relative. I have to scroll to see the full image in the div. But when I set it to absolute it centers the div perfectly but the nav bar is not visible anymore. I would be grateful if someone could help me!
  HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;title&gt;RATA&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/styles.css&quot;&gt;
      &lt;link rel=&quot;icon&quot; href=&quot;favicon.ico&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;header&gt;
        &lt;img class=&quot;Logo&quot; src=&quot;images/R-white.png&quot; alt=&quot;Skull-Logo&quot;&gt;
        &lt;nav&gt;
          &lt;ul class=&quot;nav__links&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Roadmap&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Team&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;FAQ&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;a class=&quot;cta&quot; href=&quot;#&quot;&gt;&lt;button&gt;Mint&lt;/button&gt;&lt;/a&gt;
      &lt;/header&gt;
      &lt;div class=&quot;Start&quot;&gt;
      &lt;img class=&quot;background&quot; src=&quot;images/RATA-small.svg&quot; alt=&quot;RATA&quot;&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&amp;display=swap');
  
  /************** PARAM SELECTORS ******************/
  
  body {
    margin: 0;
  }
  
  
  /*******************CLASS SELECTORS*****************/
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #191919;
    z-index: 1;
  }
  
  li, a, button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #edf0f1;
    text-decoration: none;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
  }
  
  .Logo {
    cursor: pointer;
    height: 100px;
    margin: 0;
  }
  
  .nav__links {
    list-style: none;
  }
  
  .nav__links li {
    display: inline-block;
    padding: 0px 20px;
  }
  
  .nav__links li a {
    transition: all 0.3s ease 0s;
  }
  
  .nav__links li a:hover {
    color: #0088a9;
  }
  
  
  .cta button {
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
  }
  
  .cta button:hover {
    background-color: rgba(0, 136, 169, 0.8)
  }
  
  /**Div**/
  .Start {
    position: relative;
    bottom: 0;
    width: 100%;
  }
  
  /** Image in Div**/
  .background {
    margin-top: 0px;
    bottom: 0;
    position: relative;
    z-index: 0
  }
  </code></pre>