Первое, что я хотел бы отметить, это то, что в вашем случае «home» не является источником в карте сайта. Хотя это может показаться визуально, семантически это не так. SlickMap понимает это (или, может быть, им просто повезло), поэтому в их html «home» li находится на том же уровне, что и другие основные страницы. Единственное, что находится над остальными страницами, это root, у которого нет страницы (хотя большинство людей перенаправляют root на «домашнюю страницу»).
Во-вторых, как только родительский z-index установлен, если дочерний элемент не установлен на position: absolute, а родительский не установлен на position: relative, все дочерние элементы считаются start один уровень выше родителя в отношении порядка размещения. Это определено в стандарте CSS 2.1 в 9.9.1 Указание уровня стека: свойство 'z-index' as (выделено мной):
Порядок, в котором дерево рендеринга нарисовано на холсте, описывается в терминах стековых контекстов. Контексты стека могут содержать дополнительные контексты стека . Контекст стекирования является атомарным с точки зрения его родительского контекста стекирования; блоки в других контекстах стека могут не находиться между какими-либо из его блоков.
Итак, пока SlickMap смог сказать вам:
Первый <LI> должен быть z-index: 2; и должен быть поверх любого другого <LI> дальше вниз.
В вашем дизайне это не имеет значения, поскольку перемещение первого li вверх перемещает всех его детей. И, поскольку дети в вашем домашнем блоке начинают свой собственный контекст наложения на один уровень выше, чем родительский, ваш «домашний» ли никогда не может быть выше элементов внутри него.
Теперь, когда это не так. Я рассмотрел ваш код с кодом SlickMap , чтобы понять различия. Как вы можете видеть ниже, здесь есть только один разумный вариант, который будет на 100% совместимым.
z-index поддерживает отрицательные числа, но, поскольку контекст суммирования отличается от «дома» и его братьев и сестер, вы не можете использовать это здесь. Однако, если для каждого дочернего элемента «home» было установлено значение position: absolute, а для «home» li было установлено значение position: static (по умолчанию), в некоторых случаях можно использовать z-index: -1 для этих дочерних элементов и сделать они, кажется, позади родителя. Но у вас должны быть доступны и другие переменные (например, прозрачность фона родителя родителя) И , что наиболее важно, вам нужно будет расположить каждого потомка вручную. Очевидно, что это не очень хорошая идея. Не говоря уже о негативах в z-index глючит в IE6 / 7.
Что вам нужно сделать, как и SlickMap , объединить первое ul в li, содержащее "home", с ul.level--0. Это приведет к следующей иерархии:
ul
--Home
--Meyers
--Another Level
--M....
--Another Level
--etc
Тогда вы сможете применить z-index: 2 к «дому» li, и вы получите результат, который вы ищете. Очевидно, что изменение структуры, скорее всего, потребует и других изменений ваших стилей.
Вероятно, есть несколько способов, которыми свойства CSS 3 могут помочь вам, но я не хочу вдаваться в подробности, так как не уверен в ваших требованиях.
Надеюсь, что этот урок в CSS strcutres макета был достаточно полезным, чтобы вы могли принять взвешенное решение о том, как двигаться дальше в вашем проекте. Если у вас есть дополнительные вопросы по поводу того, что я сказал, просто дайте мне знать.