Позиционирование div при слоев: z-index

[MaxXxaM]

Доброго времени суток!

Возникла следующая ситуация:

Необходимо расположить несколько div, которые в свою очередь, в процессе работы будут изменять свой размер в зависимости от контента в одну линию, на слою выше, чем подложка. Приведу пример:

<div class="id_1" style="position:relative; z-index:1; height:20px; width:400px;"></div>
<div class="id_2" style="position:relative; z-index:2; margin-top:-20px; height:20px; width:100px;">
 <div class="id_2_1" style="float:left;height:20px; width:20px; margin-left:5px;"></div>
 <div class="id_2_2" style="float:left;height:20px; width:20px; margin-left:5px;"></div>
 <div class="id_2_3" style="float:left;height:20px; width:20px; margin-left:5px;"></div>
</div>

Как вы уже наверное поняли 3 элемента накладываются друг на друга, так как используется "margin-top:-20px" данный трюк...

Если попробовать вместо "margin-top:-20px" использовать "top:-20px", вроде бы все прекрасно, но при создание последующих блоков возникает промежуток равный высоте div - id_2... Мне в свою очередь необходимо, чтобы id_2_1, id_2_2, id_2_3 не накладывались друг на друга и не образовывался пустой промежуток после данного кода.

Заранее спасибо за любую оказанную помощь!

Edited September 5, 2011 by MaxXxaM

[irinablue]

возможно я сегодня переработала )) что-то не соображу, какой должен быть конечный результат - есть картинка как должно быть?

[MaxXxaM]

возможно я сегодня переработала )) что-то не соображу, какой должен быть конечный результат - есть картинка как должно быть?

Сейчас нарисуем... Я даже не пробовал его запустить Только накидал...

возможно я сегодня переработала )) что-то не соображу, какой должен быть конечный результат - есть картинка как должно быть?

Сейчас нарисуем... Я даже не пробовал его запустить Только накидал...

http://95.220.169.138/computer/indexc.php

Вот тебе и на... В этом примере все работает... А у меня в проекте не получается Будем думать

[irinablue]

http://95.220.169.138/computer/indexc.php

Вот тебе и на... В этом примере все работает... А у меня в проекте не получается Будем думать

используешь тот же код, который в первом сообщении или что-то еще?

кинь код, который не получается

[MaxXxaM]

http://95.220.169.138/computer/indexc.php

Вот тебе и на... В этом примере все работает... А у меня в проекте не получается Будем думать

используешь тот же код, который в первом сообщении или что-то еще?

кинь код, который не получается

http://95.220.169.138/computer/index.php

Вот там где элементы меню... Они сливаются воедино

Очень и очень странно в первом случае

http://95.220.169.138/computer/indexc.php все получается...

Во втором

http://95.220.169.138/computer/index.php косяк...

[irinablue]

ох, конечно, намудрено с дивами и с отрицательными margin-top...

для .header_menu_elements сделайте margin-top: -39px;

для .header_menu_element margin-top: -38px;

хотя по-правильному надо бы переверстать

[MaxXxaM]

ох, конечно, намудрено с дивами и с отрицательными margin-top...

для .header_menu_elements сделайте margin-top: -39px;

для .header_menu_element margin-top: -38px;

хотя по-правильному надо бы переверстать

А вот сейчас например... Почему потомки не пошли за родителем ".header_menu_elements", у которого указан margin-top: -60px; ?

ох, конечно, намудрено с дивами и с отрицательными margin-top...

для .header_menu_elements сделайте margin-top: -39px;

для .header_menu_element margin-top: -38px;

хотя по-правильному надо бы переверстать

Попробовал, но что-то не получается...

[irinablue]

по-быстрому вот так - http://jsfiddle.net/UtGrR/

но кнопки же будут в будущем ссылками и должны быть полностью кликабельными для этого достаточно использовать всего 2 тега и спрайт

http://jsfiddle.net/VV3Fh/3/

Edited September 5, 2011 by irinablue

[MaxXxaM]

по-быстрому вот так - http://jsfiddle.net/UtGrR/

но кнопки же будут в будущем ссылками и должны быть полностью кликабельными для этого достаточно использовать всего 2 тега и спрайт

http://jsfiddle.net/VV3Fh/3/

Спасибо огромное! Буду разбираться...

по-быстрому вот так - http://jsfiddle.net/UtGrR/

но кнопки же будут в будущем ссылками и должны быть полностью кликабельными для этого достаточно использовать всего 2 тега и спрайт

http://jsfiddle.net/VV3Fh/3/

Спасибо огромное! Буду разбираться...

Немножко другая логика... Раньше писал как Вы посоветовали, в этом проекте решил со слоями побаловаться, но видимо не судьба, возвращаемся к прежней логике