title: How can I allow an element to overflow when it is nested inside an element set to display: block?
body: <p>I have a bootstrap table and I need the table-body to have vertical scrolling.</p>
  
  <p>I also have some <code>td</code> elements inside the table that I would like to expand on hover and overflow the whole table.</p>
  
  <pre><code>.element:hover {
    background-size: 100% 100%;
    transform: scale(6, 6);
    transform-origin: center;
    transition: all 0.5s ease-in-out;
    z-index: 999;
  }
  </code></pre>
  
  <p>Everything behaves as expected until I set</p>
  
  <pre><code>tbody { display: block }
  </code></pre>
  
  <p>As far as I know, this is the only way to get the <code>tbody</code> to scroll. But when adding this in, the <code>td</code> element no longer overflows the table on hover and instead gets hidden behind the <code>thead</code>.</p>
  
  <p>I have tried to solve it by adding relative and absolute position but it didn't seem to make any difference... I have also tried changing the z-index to -1 on the <code>thead</code> and this didn't solve it either.</p>
  
  <p>If you run the snippet below, and you hover over the <code>td</code> item with a green background, this is the behavior I am looking for. You can see that it overflows the entire table on hover. But this version does not have scrolling in the <code>tbody</code>.</p>
  
  <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>tbody {
    height: 200px;
    /*   display: block; */
    overflow-y: scroll;
    overflow-x: hidden;
  }
  
  .element {
    background-color: green;
  }
  
  .element:hover {
    background-size: 100% 100%;
    transform: scale(6, 6);
    transform-origin: center;
    transition: all 0.5s ease-in-out;
    z-index: 999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="card col-8 offset-2 p-0 mt-5"&gt;
    &lt;div class="card-body p-0"&gt;
      &lt;table class="table table-striped"&gt;
        &lt;thead class="thead-dark"&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="col"&gt;#&lt;/th&gt;
            &lt;th class="col-3" scope="col"&gt;First&lt;/th&gt;
            &lt;th class="col-3" scope="col"&gt;Second&lt;/th&gt;
            &lt;th class="col-3" scope="col"&gt;Third&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;1&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3 element"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;2&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;3&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;4&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;5&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;6&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But now if you run this next snippet with the <code>tbody</code> scrolling enabled, you can see that when hovering over the green <code>td</code> item, it is now hidden behind the <code>thead</code>.</p>
  
  <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>tbody {
    height: 200px;
    display: block;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  
  .element {
    background-color: green;
  }
  
  .element:hover {
    background-size: 100% 100%;
    transform: scale(6, 6);
    transform-origin: center;
    transition: all 0.5s ease-in-out;
    z-index: 999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="card col-8 offset-2 p-0 mt-5"&gt;
    &lt;div class="card-body p-0"&gt;
      &lt;table class="table table-striped"&gt;
        &lt;thead class="thead-dark"&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="col"&gt;#&lt;/th&gt;
            &lt;th class="col-3" scope="col"&gt;First&lt;/th&gt;
            &lt;th class="col-3" scope="col"&gt;Second&lt;/th&gt;
            &lt;th class="col-3" scope="col"&gt;Third&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;1&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3 element"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;2&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;3&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;4&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;5&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row m-0"&gt;
            &lt;th class="col-3" scope="row"&gt;6&lt;/th&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
            &lt;td class="col-3"&gt;Blah&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <code>td</code> element is eventually going to be an image, which is why I don't want it getting cut off behind the <code>thead</code>. </p>
  
  <p>How can I get the behavior I want and allow the element to overflow the entire table, but also have vertical scrolling on the <code>tbody</code>?</p>