title: Place an item at a fixed position in a scrolling div
body: <p>I have a page full of content and <code>window</code> is scrollable, in which there is scrollable <code>div</code> where my objective is to place an icon at the very bottom of the <code>div</code>, which will be visible when someone is scrolling the <code>div</code> and will not visible after content disappears or <code>window</code> scrolls.
  But I am not getting how could I achieve my objective. As making it <code>fixed</code> It get visible to whole <code>body</code> scroll.</p>
  
  <p>I want that element to be fixed at the div's bottom and will not visible if the <code>body</code> scrolls
  Below I am giving an example:</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>div { height: 100px;
      border: 1px solid; 
      overflow:auto;
      position:relative;
      
      }
  span {
    background : red;
    position : fixed;
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;p&gt;I have something&lt;/p&gt;
      &lt;p&gt;I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu&lt;/p&gt;
      &lt;p&gt;I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu&lt;/p&gt;
      &lt;span&gt;this need to fixed at the botti=om and visible while scrolling the div&lt;/span&gt;
  &lt;/div&gt;
  
      &lt;p&gt;I have something&lt;/p&gt;
      &lt;p&gt;I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu&lt;/p&gt;
      &lt;p&gt;I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu&lt;/p&gt;
      &lt;p&gt;I have something&lt;/p&gt;
      &lt;p&gt;I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu&lt;/p&gt;
      &lt;p&gt;I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see the red strip content is visible to the whole body if I <code>position</code> it to be <code>fixed</code>. However, i just want it to be fixed at the div's  bottom and visible only when <code>div</code> scrolling.</p>