Z-index. Как подвинуть элемент повыше, если у родителя тоже задан z-index?

Question

[Александр Логинов-Солоницын]

Всем доброго дня! Собственно вопрос уместился в шапке. В данном примере есть проблема - нужно поднять синий блок над белым.
Z-index у div class="wrap" необходим, так как реализуется хитрая галерея работ. Этот блок появляется при наведении мышки на белый блок( в оригинале img ) .

Вот собственно сам пример jsfiddle.net/login2030/w298vpaz/1 , главная загвоздка в комментарии прописана. Копал, читал про z-index все что можно, но так и не нашел решения.

Есть конечно одна идейка - при наведении на первый белый блок, второму задавать отрицательный z-index через js. Но во-первых я не знаю как можно это сделать, ведь работ то в реале не 2, а бесконечное множество.
А во вторых мне кажется должен быть менее костыльный вариант.

Если кто сталкивался с такими граблями - подскажите пожалуйста, хоть примерный алгоритм, хоть просто мысли выскажите. Заранее всем огромное спасибо.

Добавлен пример с примерным экшеном jsfiddle.net/login2030/w298vpaz/3

Добавлен скриншот реальной задачи :


Как видно из примера - всплывающий серый блок закрывает соседнюю работу. А синий блок из примера - это значок глаза и текст "Посмотреть ".

Comments

[Евгений Петров]

А где посмотреть на эти блоки?

[Евгений Петров]

Вы бы идею объяснили — когда должен быть виден синий блок, в чём хитрость выставления такого z-index.

[Александр Логинов-Солоницын]

Идея в том, что по дизайну - синий блок это кнопка - "смотреть работу". Серый блок появляется при наведении на белый блок. Можно было бы вынести синий блок за пределы серого, но вопрос - как их связать потом? Я планирую использовать $('обертка для кода примера').find('image').click(function() {появление блока wrap});

Answer 1

[Евгений Петров]

При конкуренции между контекстами z-index определяет победителя. Так что да — если вы для позиционируемого блока для контейнера выставили z-index, то этот блок не может выиграть у любого другого позиционируемого блока в контексте, который расположен в контексте, выигравшем у контейнера первого блока.
Изменить ситуацию можно, либо не выставляя z-index для контекстов, либо динамически меняя эти значения.

Счёт насчёт счёта. Граф считает счета на своём счету.

Update: Вот так примерно решается ваша задача. Ничего хитрого — просто смена z-index при наведении.

Comments

[Александр Логинов-Солоницын]

Извиняюсь, сейчас только увидел Ваш update. После 2-х суток без сна реакция притупляется) Спасибо

Answer 2

[xmoonlight]

jsfiddle.net/w298vpaz/6

Comments

[Александр Логинов-Солоницын]

К сожалению такой вариант не подходит. Это связано со спецификой появления .wrap. Это я на скорую руку для примера сделал его fadeIn-fadeOut. Так по задумке он должен появляться тогглом слева на право.

[xmoonlight]

Александр Логинов-Солоницын: дублируйте изображение в новом слое с overflow:hidden из наведенного и растягивайте toggle-ом...

[Александр Логинов-Солоницын]

Красота требует жертв =) Уж лучше попробовать определить картинку рядом и прописать ей зет индекс -1.

[xmoonlight]

Александр Логинов-Солоницын: кстати, да...
А можно после слоя наведенную выдвинуть на z-index: 2-ку)))
а лупу - на 3-ку....
(чтобы не смотреть соседнюю и с какой стороны она там еще)))

[Александр Логинов-Солоницын]

Такой вариант не канает. Лупа все равно позади картинки остается.

[xmoonlight]

Александр Логинов-Солоницын: лупу-то на 3-ку сменили?

[Александр Логинов-Солоницын]

Типа так jsfiddle.net/login2030/w298vpaz/5 ?

[xmoonlight]

Александр Логинов-Солоницын: jsfiddle.net/w298vpaz/6

[Александр Логинов-Солоницын]

ну так разметку менять придется... хотя решения лучше похоже нет...спасибо)

[xmoonlight]

Александр Логинов-Солоницын: ну хотя вот еще что: hover на image можно прописать отдельно в CSS. Тогда кнопку blue можно будет убрать из центра картинки.....

[Александр Логинов-Солоницын]

Допишите ссылку на пример в ответе, мало ли кому нибудь будет нужно

[xmoonlight]

Александр Логинов-Солоницын: ок. Спасибо, что выбрали мой ответ решением!

Answer 3

[Анатолий]

Не очень понимаю вопрос.
Чем больше Z-index - тем выше элемент.
У Вас у Wrap - z-index = 1, а у Img = 4
Соответственно все что будет во wrap - ниже Img. А все, что Вам нужно - это увеличить Z-index у wrap

Comments

[Александр Логинов-Солоницын]

Мне нужно чтобы синий блок был выше белого, с сохранением z-index у wrap. У синего блока в данном примере z-index самый высокий - 5, но он не выше белого.

[Александр Логинов-Солоницын]

А если я увеличу зет индекс у wrap, то белый блок скроется. А мне нужно, чтобы белый блок как бы встал между серым и синим блоками.

[Анатолий]

Александр Логинов-Солоницын: Потому что его родитель wrap - ниже белого блока. Т.е. все что во wrap - будет ниже белого блока.

Answer 4

[Pretor DH]

Убирай все z-index - они лишние у неактивных элементов. И ставь на .wrapper:hover вот такой стиль:

.wrapper:hover .wrap,.image:hover {
    z-index:1;
}

Решение на Jsfiddle

Изначально не правильно построена концепция. У тебя для каждой картинки должен быть свой текст. Абсолютное позиционирование как картинок так и враперов не уместно. Враппер для каждой картинки нужно ставить в нутрь блока .image - Перед тегом img, или задать z-index если картинка в background. А синий блок "Посмотреть" создавать через :after.

Comments

[Александр Логинов-Солоницын]

К сожалению Ваш вариант не работает. Синий блок все так же позади белого.

[Pretor DH]

Смотри исправлено...

[Александр Логинов-Солоницын]

нужно попробовать сделать Ваш вариант,просто сейчас немного поменялось тз.

[Александр Логинов-Солоницын]

Но ссылка на пример не та точно

[Евгений Петров]

Александр Логинов-Солоницын: Я смотрю, вам очень нравится заниматься ерундой. Такое впечатление, что вам писать ответы бессмысленно.