Как заставить работать z-index в нужном русле?

Question

[Герман Мартин]

Есть html и css, суть разметки и что нужно получить следующая:

Element_1 --- z-index: 2; position: fixed; (скрывает все остальное при нажатии на subelement_1)

Element_2 --- z-index: 1; position: relative;
subelement_1 --- тут кнопка, которая скрывает (при нажатии сам не должен пропадать)
subelement_2 --- лишний элемент
subelement_3 --- лишний элемент

Средствами js Element_1 получается z-index: 2; position: fixed; при нажатии на subelement_1.

Так вот, как можно варьирую z-index: и position на элементах получить subelement_1, который будет доступным для клика?

Текущий вариант вот такой:


а нужно чтобы было так:


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

Comments

[Stalker_RED]

непонятно.
Покажите может картинкой или какую структуру вы хотите получить.

[Виталий Першин]

Если subelement_1 вложен в Element_2 то его z-index работает только внутри Element_2.

[Герман Мартин]

prntscr.com/kuqj2c
вот, эта ситуация текущая, после нажатия, нужно скрыть 2 и 3 блок 4 блок скрыть получилось. Сбрасываю 2 и 3 блок их z-index. Но получается либо так, либо все скрывается.

должно получиться вот так:
prntscr.com/kuqlcv

[Герман Мартин]

Виталий, игрался c z-index и с равными и с дочерними элементами их z-index, но нужного результата нету

[Moskus]

Герман Мартин, скрины - на habrastorage и вставить в текст вопроса. А еще лучше - весь код на JSFiddle и ссылку в текст вопроса. Вы максимально уменьшаете себе шансы на получение ответа.

[Герман Мартин]

Moskus, спасибо, исправил

[Moskus]

Герман Мартин, код или псевдокод вы таки ленитесь выложить...

[Герман Мартин]

Moskus, это конечно же не псевдокод, решение найдено и выложено в виде ответа

Answer 1

[Герман Мартин]

Решение найдено - задал z-index больший чем у всех текущих блоков и так как надо было 1 блок сделать кликабельным, сдвинул покрывающий блок вниз. При отмене, возвращаю все как было.

$('.cool_bg_for_menu_hover').addClass('cool_bg_for_menu_hover_inner').css({'z-index':1002,'top':'60px',});