html - 无法定位 "back to top"按钮

Question

我仅根据我发现的不同准则使用 HTML 和 CSS 创建了“返回顶部”和“转到底部”按钮。我是一名业余爱好者，所以我认为这将是一个简单的修复。

正如您所看到的( https://imthemoisturizer.com )，按钮卡在网站的左下角，即使我尝试了不同的解决方案我似乎无法让它们将自己定位在右下角，一个在另一个上面。为简单起见，我将只包含“返回顶部”按钮的代码，因为它们基本上是相同的(除了它们链接到的位置)。

HTML:

在 header.php 上我创建了这个 div:

<div id="top"></div>

在 footer.php 上我添加了以下内容:

<a href="#top" class="top"><img src="SVG image I want to show" alt="Boton subir" width="40" height="40"></a>

CSS:

这是我包含的用于定位和外观的 CSS 代码:

.top {
  --offset: 50px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));

  /* visual styling */
  background-color: #transparent;
  width: 50px; 
  height: 50px;
  text-align: center;
  position: sticky;
  bottom: 30px;
  left: 85%;
  right: 0px;
  transition: background-color .3s,     
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  border-radius: 100px;
  white-space: nowrap;
}

我没有解决方案，因此非常感谢您的帮助!

Answer 1

您希望它始终位于左下角吗？尝试这样的事情:

.bottom-right {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 900;
}

或者只是添加到样式属性

<div style="position: fixed; top: 25px; left: 25px; z-index: 900">
  top left
</div>
<div style="position: fixed; top: 25px; right: 25px; z-index: 900">
  top right
</div>
<div style="position: fixed; bottom: 25px; left: 25px; z-index: 900">
  bottom left
</div>
<div style="position: fixed; bottom: 25px; right: 25px; z-index: 900">
  bottom right
</div>

如果其他组件隐藏了 z-index，也可以考虑添加 z-index。通常，UI 库的对话框放置在 z-index 的 ±1000 处，因此添加了 900。

已将 div 添加到您的网站，这是屏幕截图。对于CSS，可能会覆盖CSS规则等。虽然在这种情况下代码很小并且仅由该元素使用，但我不担心添加内联样式: