title: How to make div stay in place when another div is hidden?
body: <p>I have 5 div(s) and a button below those div(s). I want to hide those div(s) before I click the button to show the div one by one but the problem is when I hide the div(s), the button below will change the position to the top position of the hidden div.</p>
  <p>HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;wrapper&quot;&gt;
         &lt;div class=&quot;monitor-box&quot;&gt;
              &lt;div id=&quot;chat1&quot; class=&quot;speech-bubble-kiri cht&quot;&gt;
                  &lt;p class=&quot;chat-text&quot;&gt;Hai &lt;/p&gt;
              &lt;/div&gt;
              &lt;div id=&quot;chat2&quot; class=&quot;speech-bubble-kanan cht&quot;&gt;
                  &lt;p class=&quot;chat-text&quot;&gt;Hai juga &lt;/p&gt;
              &lt;/div&gt;
              &lt;div id=&quot;chat3&quot; class=&quot;speech-bubble-kiri cht&quot;&gt;
                  &lt;p class=&quot;chat-text&quot;&gt;Lagi ngapain?&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id=&quot;chat4&quot; class=&quot;speech-bubble-kanan cht&quot;&gt;
                  &lt;p class=&quot;chat-text&quot;&gt;Mikirin kamu&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id=&quot;chat5&quot; class=&quot;speech-bubble-kiri cht&quot;&gt;
                  &lt;p class=&quot;chat-text&quot;&gt;Aww, so sweet &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;chat-button&quot;&gt;
                  &lt;button id=&quot;btn-chat&quot;&gt;SEND&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre class="lang-css prettyprint-override"><code>html, body {
      background-image: url(https://api.time.com/wp-content/uploads/2020/11/GettyImages-1207834649.jpg);
      overflow-y: hidden;
      background-size: cover;
      background-repeat: no-repeat;
  }
  
  .wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
  }
  
  .bg-img {
      position: absolute;
      width: 80%;
  }
  
  .monitor-box {
      backdrop-filter: blur(10px);
      width: 720px;
      height: 500px;
      border: 10px solid black;
      border-radius: 20px;
      margin-top: 5%;
  }
  
  .chat-text {
      margin-left: 5%;
      padding-top: 4%;
  }
  
  .speech-bubble-kiri {
      position: relative;
      background: white;
      border-radius: 20px;
      width: 50%;
      height: 10%;
      margin: 5%;
  }
  
  .speech-bubble-kiri:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 10%;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: white;
      border-bottom: 0;
      border-left: 0;
      margin-left: -7.5px;
      margin-bottom: -15px;
  }
  
  .speech-bubble-kanan {
      position: relative;
      background: white;
      border-radius: 20px;
      width: 50%;
      height: 10%;
      margin-left: auto;
      margin-right: 5%;
  }
  
  .speech-bubble-kanan:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 90%;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: white;
      border-bottom: 0;
      border-right: 0;
      margin-left: -7.5px;
      margin-bottom: -15px;
  }
  
  .chat-button {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: -20px;
  }
  
  #btn-chat {
      background-color:yellowgreen;
      color: white;
      border: none;
      padding: 10px;
      border-radius: 20px;
      margin-right: 1.5em;
      cursor: pointer;
      transition: all .2s ease-in-out;
      position: fixed;
  }
  
  #btn-chat:hover {
      transform: scale(1.1);
  }
  
  .o {
      width: 100%;
      height: 100%;
  }
  
  </code></pre>
  <p>JQuery:</p>
  <pre class="lang-js prettyprint-override"><code>$('.cht').hide();
  $('#btn-chat').click(function () {
      $('.cht:hidden:first').show();
  });
  </code></pre>
  <p>I also provide a fiddle here: <a href="https://jsfiddle.net/pg71jw2t/" rel="nofollow noreferrer">https://jsfiddle.net/pg71jw2t/</a></p>