title: Is it possible to have a child float over the vertical scroll?
body: <p>I have a list in html which has list items and vertical scroll bar is enabled for overflow. One of the children of the list item is an image parked on the right corner of the list item. When mouse is hovered on it, I want to display a flyout which is also a child in the list item. The problem is that the flyout gets chopped but I want it to float and be displayed over the scroll bar when one hovers the mouse. Is it even possible? I am trying to avoid housing the image and flyout outside of the list item because then it would mean we have to calculate the position of it every time we scroll and place it currently in the list item. Also, it is a complicated web page already up and running , so I don't want to mess around too much with the list and scroll bar. </p>
  
  <p>I have created a simpler test.html for the purpose of this question. 
  In the code below, lets say I want to have the green block go past the scroll bar when one hovers the mouse. Is it even possible?</p>
  
  <p>I tried making the flyout position = absolute, tried overflow = visible, tried giving insanely large z-index. </p>
  
  <pre><code>&lt;style type="text/css"&gt;
  div#listpanel {
    width: 254px;
    height: 1180px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  div.blackdiv {
    left: 0px;
    width: 500px;
    height: 107px;
    top: 20px;
    background: black;
  }
  div.greendiv {
    left: 180px;
    top: 50px;
    width: 600px;
    height: 20px;
    background: green;
  }
  &lt;/style&gt;
  </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-html lang-html prettyprint-override"><code>&lt;div id="listpanel"&gt;
  &lt;div role="list"&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="blackdiv" role="listitem"&gt;
    &lt;div class="greendiv"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>