html - CSS 绝对定位 带引用点

Question

我有两个 div，一个 relative 另一个是 absolute 并且定位在 right: -35 所以它超过了 relative div与 -35

现在用 - Name 计算为 -35如果文本的长度(inside #sub)增加，它会移动到文本上方(hello everyone.)，为什么？因为它的位置正确。

看起来像这样

hello everyone. -Name

html:

<div id="main">
    <span>hello everyone.
    <span id="sub">-Name</span>
</div>

代码:

#main {position: relative; display: inline-block;}
#sub {
    position: absolute;
    bottom:0;
    right: -35;
}

还有另一种解决方案，将right 更改为left。但它会涉及 javascript，所以我可以获得 div main 的长度，因为它不会总是 hello everyone. 而不是我添加 lenth.div + 35 来解决这个问题。

这里有一种方法可以保持right: -35，并将span的扩展改为右。

Answer 1

你应该可以使用 left:100%在您的绝对定位 span 元素上。我认为这就是您想要的结果。此外，我通过为第一个 <span> 添加结束标记来修复您的 HTML元素。

#main {
  position: relative;
  display: inline-block;
}
#sub {
  position: absolute;
  bottom: 0;
  min-width: fit-content;
  left: 100%;
  background-color: orange;
}

<div id="main">
  <span>hello everyone.</span>
  <span id="sub">-Name</span>
</div>