title: How i expanding body to prevent overlap during position absolute with CSS
body: <h2>How I expanding body to prevent overlap:</h2>
  <p>see this first<br><a href="https://i.stack.imgur.com/9IAKN.jpg" rel="nofollow noreferrer">photo of my case</a><br />
  I make all containers with <code>position absolute</code>; in the bottom <code>position absolute</code> to body, the top header of search bar also <code>position absolute</code> to body, container of time date and weather data is also <code>position absolute</code>,
  <br>
  Of course I have big code but this is what we need now:<br />
  HTML: <br><br></p>
  <pre><code>&lt;body&gt;
      &lt;div class=&quot;aside&quot;&gt;
          &lt;!-- Region, Country, Coord, Time, date container that contain the data of weather [humidity, wind speed, so on...] --&gt;         
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>body {
      overflow: hidden;
      color: #eee;
      width: 100%;
      height: 100vh;
      font-family: 'Poppins', sans-serif;
      position: relative;
      background-color: black;
      background-image: url(&quot;https://images.unsplash.com/photo-1621274403997-37aace184f49?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&quot;);
      background-repeat: no-repeat;
      background-size: cover;
  } 
  .aside {
      position: absolute;
      top: 37px;
      left: 12px;
      font-size: 22px;
      font-weight: 700;
      padding: 30px;
      overflow: hidden;
      width: 100%;
      transition: all 0.4s;
  }
  </code></pre>
  <p>How can I expanding body height automatically when the elements overlaps?</p>