Search code examples
csspositionalignmentsticky

Aligning position sticky at the bottom right is not working

I need this button to stick at the bottom right of the screen, but as you can see there's something wrong with my code. What am I missing?

Can you help? Thanks.

html {
  background: #ccc;
}

.chat {
  width: 55px;
  height: 55px;
  position: sticky;
  bottom: 20px;
  right: 20px;
  background: red;
  border: 0;
}
<button class="chat"></button>

Solution

  • Try this:

    .chat {
 width: 55px;
 height: 55px;
 position: fixed;
 bottom: 20px;
 left: 20px;
 background: red;
 border: 0;
 }

    position: fixed is key element.