右下角的对齐位置粘性不起作用

Question

我需要将此按钮固定在屏幕的右下角，但如您所见，我的代码有问题。我错过了什么？

你能帮我吗？ 谢谢。

html {
  background: #ccc;
}

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

<button class="chat"></button>

Answer 1

试试这个：

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

position: fixed 是关键元素。

Answer 2

您可以使用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>