Question

我在彼此内部有两个div relative另一个absolute并定位right: -35所以它超过-35的相对div

现在使用- Name计算为-35 如果文本的长度（inside #sub）增加，它将移动到文本（hello everyone.）上，为什么？因为它是位置right。

它看起来像这样

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

您应该只能在绝对定位的span元素上使用left:100%。我认为这是你想要的结果。另外，我通过为第一个<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>

CSS定位绝对与参考点

1 个答案: