css - 定位具有定义宽度的 DIV - 在 DIV 内部

Question

有一些 DIV 和 SPAN 具有文本定义的宽度。我需要根据 TOP/LEFT 定义它们的确切位置。但是使用“inline-block”选项是不可能的。

如何设置顶部/左侧的确切位置并保持其宽度定义的文本宽度？

jsFiddle 示例

HTML

<div id="container" style="float: left; margin-right: 10px;">
    <span id="test1">aaa</span>
    <span id="test2">bbb</span>
    <span id="test3">ccc</span>
</div>
<div id="container" style="float: left;">
    <div id="test1">aaa</div>
    <div id="test2">bbb</div>
    <div id="test3">ccc</div>
</div>

CSS

#container {
    width:300px;
    height:300px;
    background-color: #efefef;
}
#test1{
    position: relative;
    top: 100px;
    left: 0px;
    display: inline-block;
}
#test2{
    position: relative;
    top: 0px;
    left: 0px;
    display: inline-block;
}
#test3{
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
}

Answer 1

将包装器设置position为relative

#container {
    position: relative;
    ...
}

然后将内部 div 设置position为absolute

#test1 {
    position: absolute;
    ...
}

...