Позиционировать элемент ниже родственного элемента, который использует абсолютное позиционирование

Question

У меня есть элемент с классом slide-bottom, который расположен под другим содержимым в родительском .container div с использованием z-index. Я использовал position: absolute на .slide-bottom, поэтому элемент скользит под другим содержимым. Внутри родительского div у меня также есть элемент nav, который я бы хотел расположить ниже содержимого .slide-bottom во время и после анимации. Как я могу это сделать?

.slide-bottom {
  -webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


/* ----------------------------------------------
 * Generated by Animista on 2020-2-3 14:56:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/**
 * ----------------------------------------
 * animation slide-bottom
 * ----------------------------------------
 */

@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.container {
  background-color: white;
}

.slide-bottom {
  z-index: -10;
  position: absolute;
}

<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css" rel="stylesheet" />
<section class="section">
  <div class="container">
    Stuff in container<br> Stuff in container<br> Stuff in container

    <div class="slide-bottom">
      <section class="section">
        <div class="container">
          <table class="table is-fullwidth">
            <thead>
              <tr>
                <th>Name</th>
                <th>Company</th>
                <th>Key 1</th>
                <th>Key 2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Test</td>
                <td>Test</td>
                <td>Test</td>
                <td>Test</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>

    <nav class="pagination is-rounded" role="navigation" aria-label="pagination">
      <ul class="pagination-list">
        <li>
          <a class="pagination-link" class="is-current" aria-label="Page 1" aria-current="page">
            1
          </a>
        </li>
        <li>
          <a class="pagination-link" aria-label="Page 2" aria-current="page">
            2
          </a>
        </li>
      </ul>
    </nav>

  </div>
</section>