div position:absolute overlaps adjacent div position:relative

Question

css

there is:

<style>
.item{position:relative; float: left; }
.tools{position:absolute;}
</style>
<div>
<div class="item">aa<div class="tools">22</div></div>
<div class="item">as<div class="tools">33</div></div>
<div class="item">asd<div class="tools">44</div></div>
<div class="item">asd<div class="tools">55</div></div>
<div class="item">asd<div class="tools">66</div></div>
</div>

the result on the screen: as you can see, the div with numbers falls under the neighboring div with letters, the task is that the divs with numbers are higher than all blocks with numbers. z-index doesn't help. those. the "22" div nested in the "aa" div crawls under the "as" div

Answer 1

z-index for .tools helps
http://jsfiddle.net/T4JX7/

Answer 2

Or put them in reverse order and put float:right on the item and float:left on the container.
jsfiddle.net/6RAK8/2/
Or put z-indexes on item in descending order.
jsfiddle.net/6RAK8/3/

Answer 3

thanks, it worked. however, the question arose, why if so jsfiddle.net/dmwaB/ does not plow, although the z-index for item is less?
theory please)

Answer 4

the shvedovka
SerDIDG 1 variant has earned
- these are future layout problems. because this will be inserted into the already existing verst
2 - the mechanism is dynamic, and such an approach is not practical and convenient,
but thanks for the advice anyway!)