Place an item at a fixed position in a scrolling div

Question

I have a page full of content and window is scrollable, in which there is scrollable div where my objective is to place an icon at the very bottom of the div, which will be visible when someone is scrolling the div and will not visible after content disappears or window scrolls. But I am not getting how could I achieve my objective. As making it fixed It get visible to whole body scroll.

I want that element to be fixed at the div's bottom and will not visible if the body scrolls Below I am giving an example:

div { height: 100px;
    border: 1px solid; 
    overflow:auto;
    position:relative;
    
    }
span {
  background : red;
  position : fixed;
  
}

<div>
    <p>I have something</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
    <span>this need to fixed at the botti=om and visible while scrolling the div</span>
</div>

    <p>I have something</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
    <p>I have something</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>

As you can see the red strip content is visible to the whole body if I position it to be fixed. However, i just want it to be fixed at the div's bottom and visible only when div scrolling.

Answer 1

A standardly supported way is to edit the HTML markup and add a wrapper element to both the scrollable and the "fixed" element - which will now have position: absolute; instead:

#wrapper {  /* ADDED */
  position: relative;
  width: 200px;
}

#scrollable {
  height: 100px;
  border: 1px solid;
  overflow: auto;
  position: relative;
}

#wrapperFooter {
  background: red;
  position: absolute; /**/
  bottom:0;
}

<div id="wrapper">
  <div id="scrollable">
    <p style="border: 4px dashed #000; height: 200px;"></p>
  </div>
  <div id="wrapperFooter">ABSOLUTELY! :)</div>
</div>

Answer 2

I think you are looking for sticky position like this

div {
  height: 100px;
  border: 1px solid;
  overflow: auto;
  position: relative;
}

span {
  background: red;
  position: sticky;
  bottom: 0;
}

<div>
  <p>I have something</p>
  <p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
  <p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
  <span>this need to fixed at the bottom and visible while scrolling the div</span>
</div>

<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>

Simply pay attention to browser support as this property is not yet supported everywhere

Here is another trick using fixed position but more a hack than a generic solution.

body {
  transform:translate(0,0); /* Block fixed position from scrolling*/
}
div {
  height: 100px;
  border: 1px solid;
  overflow: auto;
  position: relative;
}

span {
  background: red;
  position: fixed;
  margin-top:-110px; /*this need to be calculated depending on content*/
}

<div>
  <p>I have something</p>
  <p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
  <p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
  <span>this need to fixed at the bottom and visible while scrolling the div</span>
</div>

<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
<p>I have something shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>