从元素的左下角定位元素答案

【问题标题】：Positioning an element from the bottom left of the element从元素的左下角定位元素
【发布时间】：2021-08-29 22:47:19
【问题描述】：

请原谅我糟糕的 MS Paint 绘图，但我认为这将是我解释我想问的最简单的方法： My ms paint image hosted on imgur because I'm not allowed to include images inline I guess

在我的代码元素 1（在图片中列出）不会移动，它正是它需要的位置。将鼠标悬停在元素 1 上时会出现元素 2，有点像工具提示。元素 2 由absolute 定位，偏移特定数量的像素，使其直接显示在元素 1 的右上角。

问题在于，每次将鼠标悬停在元素 1 上时，元素 2 的大小都会有所不同。这使得无法始终让元素 2 始终直接显示在元素 1 的右上角，因为使用 @987654324 @ 定位元素将“锚点”设置为左上角。如果元素 2 很短，它会出现在元素 1 的上方。如果元素 2 很长，它的底部会超过元素 1。

有没有办法将元素 2 的“锚点”设置为左下角而不是左上角？我更喜欢在香草 CSS/JavaScript 中执行此操作，但如果真的需要像 jquery 这样的东西，那么我会接受它。提前感谢您的帮助。

【问题讨论】：

几个问题只是为了澄清。元素 1 是主要元素，当您将鼠标悬停在元素 1 上时会出现元素 2。那么为什么悬停时需要 3 个版本？示例 1 和示例 2 大致相同，但示例 3 之间有空格。如果我对您希望它以这种方式工作的原因有更好的理解，那么为您提供帮助会更容易。
@Invizi 对不起，我应该解释得更好。第一个面板和第二个面板是我想要发生的。无论元素 2 的大小如何，它都直接位于元素 1 的右上角。最后的面板是我不希望发生的。元素 2 在第三个面板中恰好较短，因此它出现在元素 2 上方，因为它位于最左上角的像素。我想从最左下角的像素开始定位它。
只是#2的高度每次都在变化吗？它的宽度是否保持不变？
@DanZuzevich 是的，宽度是恒定的。只有高度会发生变化。
我整理了一些你可以随意摆弄的东西，这应该是一个好的开始。将鼠标移入和移出浅灰色框，您应该会看到它为您提供了所需的内容。我现在太累了，无法写一个长的解释。 codepen.io/DZuz14/pen/bGRVyYR?editors=1010

标签： javascript css position element

【解决方案1】：

这是我在w3schools 上找到的示例。我对其进行了编辑以执行您示例中的操作。

html,
body {
  height: 300px;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
  bottom: -50px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  font-size: 0.7rem;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  top: -105%;
  left: 105%;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

【讨论】：