CODEWITHSUNDEEP
csspositionalignmentsticky
David Martins
David Martins

Reputation: 2056

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>

Upvotes: 1

Views: 3459

Answers (2)

george
george

Reputation: 586

You can reach it with using float: right;.

html {
  background: #ccc;
}

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

Upvotes: 2

Moebius
Moebius

Reputation: 668

Try this:

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

position: fixed is key element.

Upvotes: 2

Related Questions