Проблема z-индекса с комбинацией относительного и абсолютного позиционирования

Пожалуйста, посмотрите на этот пример и покажите мне, как сделать так, чтобы синий <div> располагался позади розового <div>. Как видите, я уже пробовал это с атрибутом CSS z-index, но безуспешно.
<час/>

[Обновлять]

Новая ссылка Теперь мои кнопки в синем блоке не работают.


css z-index positioning
person Web_Designer    schedule 24.03.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

jsFiddle.

Розовый div имеет непрозрачность, чтобы вы могли видеть результат.

Синий div не может быть потомком розового div.

person alex    schedule 24.03.2011
comment
Я не думаю, что он искал магию непрозрачности для своей проблемы. - person corroded; 24.03.2011
comment
@corroded Непрозрачность предназначена только для того, чтобы показать в этом примере, что розовый div находится над blue. - person alex; 24.03.2011
comment
Спасибо, ваш пример работает, но когда я помещаю кнопки в синий цвет <div>, он не работает. - person Web_Designer; 24.03.2011
comment
@inquisitive_web_developer Это не сработает, потому что оно находится за другим div. - person alex; 24.03.2011
comment
Для того, что я делаю, синий div должен быть дочерним элементом основного div. Есть ли способ, которым я мог бы сделать эту работу? - person Web_Designer; 24.03.2011
comment
@inquisitive_web_developer Не уверен, извини. Удачи. - person alex; 24.03.2011
comment
@alex ах, извините за то, что неправильно понял, что вы сказали - person corroded; 24.03.2011

arrow_upward
1
arrow_downward

Как упоминалось на странице разработчиков Mozilla, "контекст стека полностью независим от своих братьев и сестер: при обработке стека учитываются только элементы-потомки».

Я полагаю, вы не можете сделать это с помощью zIndex, но вы можете сделать его невидимым, используя непрозрачность.

person Chinmayee G    schedule 24.03.2011