title: my row lose his height when i use z-index as hover effect
body: <p>Hi i'm doing a hover effect in my cards using Bootstrap and z-index but the problem the i have is when i pass the mouse in my cards the z-index works fine but my row lose his height, i tried to add a height to my row and it fixed but my row lose the responsive, when i looks in other resolution it looks with a big space, i need it works with a responsive for different resolution and i need to use position: absolute; because i dont want it just push the cards I need z-index to raise the cards not to push it. thank you for read me and i hope you can help me</p>
  <p><a href="https://codepen.io/SoyLuck/pen/qBoJQGP" rel="nofollow noreferrer">here is my example</a></p>
  <p>i try to add a height to my row but it lose the responsive</p>
  <pre><code>.row{
    height:300px;
  }
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
    width: 100%;
  }
  
  .card {
    transition: 1s;
  }
  
  .card:hover {
    position: absolute !important;
    top: 0px;
    width: 130%;
    z-index: 1;
    transition(all .2s ease-out);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div&gt;
    &lt;div class="row bg-danger"&gt;
      &lt;div class="mt-2 col-lg-4 col-md-6 col-12"&gt;
        &lt;div class="card m-3" style="width: 18rem; height:20rem;"&gt;
          &lt;div class="card-body"&gt;
            &lt;h1 class="card-text"&gt;card 1&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row bg-warning"&gt;
      &lt;div class="mt-2 col-lg-4 col-md-6 col-12"&gt;
        &lt;div class="card m-3  " style="width: 18rem; height:20rem;"&gt;
          &lt;div class="card-body"&gt;
            &lt;h1 class="card-text"&gt;Card 2&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>