0

I need this button fixed at the bottom of the parent div and floating over its scrolling content.

I'm really surprised this doesn't work. I expected position: relative on the parent in combination with bottom: 0 on the fixed element to achieve this..

PS: the button must be inside the div.

div {
  position: relative;
  width: 200px;
  height: 100px;
  overflow-y: scroll;
  background-color: lightblue;
}

button {
  position: fixed;
  bottom: 0;
}

body {
  height: 200px;
}
<div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, assumenda. Sint optio, praesentium omnis voluptas facilis nam asperiores quod itaque repellat eaque aut molestias reiciendis quibusdam harum rem, cumque nihil!</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ab! Tempore sunt eligendi, voluptates quaerat autem reprehenderit perferendis id hic voluptate modi nisi in eaque quasi veniam delectus, voluptatibus quo.</p>

  <button>Bütton</button>

</div>
Tonald Drump
  • 1,227
  • 1
  • 19
  • 32
  • Try my code.It may be worked for you. – VSM Aug 11 '18 at 18:02
  • You misunderstood how `fixed` work. It is relative to the browser window, not a parent element. Add an extra wrapper and use `absolute`: https://jsfiddle.net/28vszjxy/ – Asons Aug 11 '18 at 18:06

1 Answers1

2

    div {
      position: relative;
      width: 200px;
      height: 100px;
      overflow-y: scroll;
      background-color: lightblue;
    }
    
    button {
      position: sticky;
      bottom: 0;
    }
    
    body {
      height: 200px;
    } 
    <div>
    
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, assumenda. Sint optio, praesentium omnis voluptas facilis nam asperiores quod itaque repellat eaque aut molestias reiciendis quibusdam harum rem, cumque nihil!</p>
    
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ab! Tempore sunt eligendi, voluptates quaerat autem reprehenderit perferendis id hic voluptate modi nisi in eaque quasi veniam delectus, voluptatibus quo.</p>
    
      <button>Bütton</button>
    
    </div>

You code is almost working.You need to do only one change.

Add position: sticky; for div element.

Try this and let me know the update ?

VSM
  • 1,765
  • 8
  • 18