Place an item at a fixed position in a scrolling div : <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>
