css - 覆盖一个小部件的正确程序 - 相对和绝对？

Question

我有一个事件插件，它列出了我们 Wordpress 网站上的 3 个事件。我希望有一个链接到页面上所有事件的图形。

我是通过使用文本小部件创建带有 href 链接的图形来完成此操作的。然后将其设置为绝对和定位。问题是当网站做出响应时，图形会移动到不合适的位置。

Ss 有任何方法可以使用相对和绝对定位将小部件绑定(bind)到另一个小部件。 IE。因此，尽管屏幕分辨率发生任何变化，它始终位于右下角。

Answer 1

您可以通过在绝对定位中使用 bottom 和 right 而不是 top 和 left 来做到这一点。

在下面的示例中，当您调整大小时，“喵”span 将保持锚定在右下角。

html,
body,
div {
  height: 100%;
}
div {
  position: relative;
  border: 1px solid red;
}
span {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: green;
  color: white;
  padding: 4px;
}

<div>
  <span>meow</span>
</div>