Почему тексту плевать на z-index?

Question

[del993788]

Пытаюсь сделать гармошку. Возможно я делаю её не так, но, как правильно её делать я не знаю. https://jsfiddle.net/6yLLep3f/1/ Нажмите на "Косметика для губ". Почему текст на первом плане?

Answer 1

[Elwen]

z-index сработает только для элементов, у которых указан position: absolute, fixed или relative.
Добавьте

.top_raz {
position:relative;
}

Comments

[del993788]

Спасибо. А вообще, как должна гармошка выглядеть? Я имею ввиду код

[Elwen]

qqignatqq Как именно должна выглядеть, не подскажу, поскольку стандарта тут нет.
Лично я, сделала бы так: https://jsfiddle.net/WebKasumi/zbhe3668/1/
- В html все списками. Это не обязательно, но мне так виднее вложенность (ну и просто привычнее).
- Для появления подменю использовала .slideToggle(). Получается меньше css писать.
- В css предпочла бы не указывать line-height заголовкам, поскольку при заголовке в 2 строки, это выглядело бы странно.
Так же на заметку: при данном раскладе пункт, у которого есть подменю не получится использовать как ссылку, поскольку по клику он должен открывать подменю. Если же необходимо сделать его ссылкой, то стоит подменю открывать не по клику, а при наведении на этот пункт. В этом случае js надо будет немного переделать.

[del993788]

Elwen: я думал про последний пункт. мне вот в голову пришло такая вещь: первый клик открывает список, второй клик уже отправляет меня в нужную мне категорию

[Elwen]

qqignatqq: Получается, что открытое подменю спрятать обратно нельзя. Даже если закрывать старое при открытии другого подменю, нельзя гарантировать, что пользователь дальше будет взаимодействовать с меню, а не станет читать содержание страницы или взаимодействовать с другими элементами на странице. И честно говоря, я сомневаюсь, что пользователи поймут, что по второму клику будет переход на другую страницу. Это довольно не стандартно.
Если не нравится вариант с hover, то может сделать рядом с пунктом меню кнопку (например стрелку вниз), по которой будет открываться подменю? А сам пункт меню будет обычной ссылкой.

[del993788]

Elwen: https://jsfiddle.net/o2m56z7m/1/ Ну или вот так. Мне так больше нравится. Только я не знаю, как сделать, чтобы при переходе в категорию раскрывался список этой категории.

[Elwen]

qqignatqq пользователь не сможет определить, где заканчивается ссылка и опять же не поймет, что кликнув в разные места подсвеченного пункта (а подсвечивается при любом раскладе весь пункт) будут совершенно разные последствия. Если вы не хотите добавлять отдельно кнопку, что бы не менять визуальный дизайн, то рассмотрите вариант, когда появляется кнопка (иконка) при наведении на пункт.
Пользователям обязательно надо визуально показать, что эта разница есть. Иначе юзабилити меню будет стремиться к нулю.
Что же касается раскрытого меню, то тут нужно или использовать js или php, чтобы проверять адрес страницы и понимать какой именно раздел открыт. Чаще для этого используется php и соответствующему пункту меню добавляется класс, отображающий его подменю раскрытым.

[del993788]

Elwen: Наверно глупый вопрос, но как сделать, чтобы при открытии второго списка, закрывался первый? Т.е. открытый может быть только один список

[Elwen]

qqignatqq: https://jsfiddle.net/WebKasumi/zbhe3668/2/

Answer 2

[Артур]

попробуйте добавить

.b_bot_raz {
    overflow: hidden;
}

Answer 3

[Сергей Горячев]

https://jsfiddle.net/webirus/6yLLep3f/2/