title: How to style element to overlap scroll
body: <p>I am working on an already existing project, with a pretty complex front end. I want to introduce a new element which should be a substitute for a dropdown. Basically it's a <code>div</code> bind with <code>knockout</code> to a collection. </p>
  
  <p>The problem I have is that on a single page there are several divs inside which a more complex structure is rendered for each one, and inside one of this divs is my custom dropdown. The problem is that when I try to expand the dropdown (a class bind to a click event using jQuery) my <code>"dropdown"</code> is rendered up to the top of the div because of the fact that there is too much content and in order to preserve the entire page look and appearance there is no good way to use <code>overflow: visible</code>.</p>
  
  <p>A snippet that pretty well introduce my problem is <a href="https://jsfiddle.net/mg8zbr41/2/" rel="nofollow noreferrer">HERE</a> :</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-js lang-js prettyprint-override"><code>$('.show-dropdown').click(function() {
  if ($(this).next('.render-this').hasClass('hide-me')) {
   $(this).next('.render-this').removeClass('hide-me');
    } else {
    $(this).next('.render-this').addClass('hide-me');
    }
  
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td {
    position: relative;
  }
  
  #top-div {
    width: 500px;
    max-width: 500px;
  border: 1px solid black;
    max-height: 100px;
    overflow-y: auto;
  white-space: nowrap;
  }
  
  #bottom-div {
    width: 500px;
    max-width: 500px;
  border: 1px solid black;
    max-height: 100px;
      overflow-y: auto;
  
  }
  
  .show-dropdown {
    width: 120px;
    height: 40px;
    background-color: green;
  }
  
  .render-this {
    position: absolute;
    bottom: 10px;
    z-index: 5;
    width: 20px;
    height: 150px;
    background-color: red;
  }
  .hide-me {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="top-div"&gt;
  &lt;p&gt;
  lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsum lorem ipsum lorem ipsum
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="bottom-div"&gt;
  &lt;table class="w3-table"&gt;
  &lt;tr&gt;
    &lt;th&gt;Column 1&lt;/th&gt;
    &lt;th&gt;Column 2&lt;/th&gt;
    &lt;th&gt;Column 3&lt;/th&gt;
    &lt;th&gt;Column 4&lt;/th&gt;
    &lt;th&gt;Column 5&lt;/th&gt;
    &lt;th&gt;Column 6&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;div class="show-dropdown"&gt;&lt;/div&gt;&lt;div class="render-this hide-me"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt;&lt;div class="show-dropdown"&gt;&lt;/div&gt;&lt;div class="render-this hide-me"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt;&lt;div class="show-dropdown"&gt;&lt;/div&gt;&lt;div class="render-this hide-me"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt;&lt;div class="show-dropdown"&gt;&lt;/div&gt;&lt;div class="render-this hide-me"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt;&lt;div class="show-dropdown"&gt;&gt;&lt;/div&gt;&lt;div class="render-this hide-me"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt;&lt;div class="show-dropdown"&gt;&lt;/div&gt;&lt;div class="render-this hide-me"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've read a lot about this topic. My conclusion so far is that if you have overflow it is pretty much game over. However from the question <a href="https://stackoverflow.com/questions/5209814/can-i-position-an-element-fixed-relative-to-parent">HERE</a> I see that with <code>transform</code> and maybe some other <code>CSS</code> it might be still possible to achieve something. Also, what I need is to render my dropdown completely, I was also thinking about using <code>overflow: visible</code> and some sort of <code>JS</code> created scroll, but haven't dig deep for this still.</p>