div position:absolute перекрывает соседний div position:relative

Question

[DrNemo]

есть:

<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>

результат на скрине:

как видно див с цифрами попадает под соседний див с буквами, задача что бы дивы с цифрами были выше всех блоков с цифрами. z-index не помогает.
т.е. див с цифрами «22», вложенный в див с «aa», залезает под див «as»

Comments

[DrNemo]

Очепятка: задача что бы дивы с цифрами были выше всех блоков с буквами

Answer 1

[shvedovka]

z-index для .tools помогает
http://jsfiddle.net/T4JX7/

Comments

[DrNemo]

случайно отписал ниже.

Answer 2

[SerDIDG]

Либо поставить их в обратном порядке и поставить float:right на item и float:left на контейнер.
jsfiddle.net/6RAK8/2/
Либо поставить z-index'ы на item в ниспадающем порядке.
jsfiddle.net/6RAK8/3/

Answer 3

[DrNemo]

спасибо, заработало. однако возник вопрос, почему если так jsfiddle.net/dmwaB/ то не пашет, хотя z-index для item меньше?
прошу теории)

Comments

[shvedovka]

Теоретик я никудышный. Но смею предположить. Применяя position: relative Вы «вырезаете» блок из общего «холста», и теперь его можно двигать с помощью left, top и подобных. Все что находиться внутри этих блоков, так же вырезается и позиционируется относительно родителя, в этом случае блоки с position:absolute. Явно указывая z-index, мы для каждого нового div.item мы его позиционируем в новом слое, а накладывание происходит, видимо потому что z-index, применяется уже после position:relative для каждого блока.

В старом (<=7) IE такой трюк не прокатит, там z-index по другому отрабатывает. Как исключение для старых IE, придется на js z-index в обратном порядке проставить как советует SerDIDG.
Работает в IE в режиме совместимости http://jsfiddle.net/dmwaB/1/, с обратной расстановкой z-indez.

[DrNemo]

спасибо, вроде дошло)
хотя как-то помойму не совсем логично, вроде z-index должен действовать глобально на весь документ.
>В старом (<=7) — это устаревшее г… о в расчет не берется)

[galaxy]

Теория:
www.w3.org/TR/CSS21/visuren.html#z-index
www.w3.org/TR/CSS21/zindex.html
developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context

Позиционированный (т.е. с position != static) элемент с указанным z-index (!= auto) порождает свой стек для дочерних элементов

Answer 4

[DrNemo]

заработал вариант shvedovka
SerDIDG
1 — это будущие проблемы по верстке. т.к. сие вставится в уже существующею версту
2 — механизм динамический, и подобный подход не практичен и не удобен
но все равно спасибо за совет!)