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

发布于 2025-01-26 12:43:07 字数 439 浏览 3 评论 0原文

我需要此按钮可以贴在屏幕的右下角，但是您可以看到我的代码有问题。我想念什么？

你能帮忙吗？谢谢。

html {
  background: #ccc;
}

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

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

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏辞 2025-02-02 12:43:07

尝试以下操作：

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

位置：固定是关键要素。

Try this:

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

position: fixed is key element.

回复收藏 0 原文

一影成城 2025-02-02 12:43:07

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

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;
}