Position 仅在一个维度中相对于另一个元素

Question

我正在尝试制作可以插入段落中的边注之类的东西，但总是会移到父级的右侧，并且在其原始 position 中不占用空间。 基本上像float: right; 但我希望它在父元素之外，而不是在它里面。

 #container { width: 400px; background-color: #eee; } #column { margin: 100px; background-color: #aaa; }.note { display: inline-block; /* Make it so that width works. */ width: 0; /* So that it doesn't take up any space in its original position. */ position: relative; /* So we can move it from its original position. */ left: calc(100% + 10px); /* Move it. */ }

 <div id="container"> <div id="column"> <p><span class="note">foo.bar</span>This is a paragraph that starts with a note. I want the note to be to the right. As you can see this works.</p> <p>But unfortunately it doesn't <span class="note">foo.bar</span> work if the note is in the middle of a paragraph.</p> <p><span class="note">foo bar</span>And it always wraps because I had to set the width to 0.</p> </div> </div>

在没有 Javascript 并且不改变note元素在 HTML 中的位置的情况下，有什么方法可以做到这一点？

Answer 1

我认为你需要这样的东西：

#container {
  width: 400px;
  background-color: #eee;
}

#column {
  margin: 100px;
  background-color: #aaa;
}
#column p{
    position: relative;
}
.note {
  display: inline-block; 
  width: 0; 
  position: absolute; 
  left: calc(100% + 10px); 
}