将项目放在滚动div中的固定位置

Question

我有一个内容丰富的页面,并且window可以滚动,其中有可滚动的div,我的目标是在最底部放置一个图标,div当有人滚动时它将是可见的,div并且在内容消失或window滚动后将不可见.但我没有得到如何实现我的目标.制作fixed它可以看到整个body滚动.

我想要将该元素固定在div的底部,如果body滚动条将不可见下面我给出一个例子:

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>

正如你所看到的红色条内容是全身可见,如果我position它是fixed.但是,我只想将它固定在div的底部,只有在div滚动时才可见.

Answer 1

标准支持的方法是编辑HTML标记并向可滚动和"固定"元素添加包装元素 - 现在将position: absolute;改为:

#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>