Html 仅在一个标注中相对于另一个图元定位图元

我试图做一些类似于页边空白的注释，可以插入到段落中，但总是移动到父对象的右侧，并且在原始位置不占用任何空间。基本上像

float：对

#容器{
宽度：400px；
背景色：#eee；
}
#纵队{
利润率：100像素；
背景色：#aaa；
}
.注{
显示：内联块；/*使其宽度有效*/
宽度：0；/*以便在其原始位置不会占用任何空间*/
位置：相对；/*因此我们可以将其从原始位置移动*/
左：计算（100%+10px）；/*移动它*/
}

这是一段
从一个音符开始。我想把纸条放在右边。
正如你所见，这是可行的

但不幸的是，它不起作用
如果音符在段落的中间，

foo barAnd它总是包起来，因为
我必须将宽度设置为0

我想你需要这样的东西：

#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); 
}

对使用
position:absolute
。注意并删除
width
属性。在
#column
中添加
position:relative
，这不是很完美，因为我真的很想相对于
column
定位，即使它们之间有
position:relative
的东西，但这似乎是不可能的，所以我将使用您的解决方案，谢谢！