Positioning DIVs with defined widths - inside DIV

Question

There are some DIVs and SPANs with text defined widths. I need to define their exact position according to TOP/LEFT. But it is not possible with "inline-block" option.

How to set exact position with top/left and maintain their width defined width of the text ?

jsFiddle example

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

Set the wrapper position to relative

#container {
    position: relative;
    ...
}

and then set the inside divs position to absolute

#test1 {
    position: absolute;
    ...
}

...