Нарисуйте элемент ниже дочернего элемента другого элемента

Question

Я пытаюсь создать наложение складок поверх карты Google, чтобы карта выглядела как настоящая карта на столе. Складки - это 2 пиксельные линии, расположенные над картой. Это выглядит хорошо и не сильно портит взаимодействие с картой, только 6 из 500 вертикальных линий недоступны для щелчка, и при использовании библиотеки javascript ext-forward в лучших браузерах щелчки перенаправляются, что учитывает проблему.

Проблема заключается в том, что маркеры, размещенные на карте, нарисованы ниже складок, но все еще имеют тени в 3d стиле.

Маркеры являются дочерними элементами div карты, и складки находятся на том же уровне, что и div карты. То есть складки и карта родные. Карта имеет z-index 0, а маркеры - z-index <100. Независимо от того, какой z-index я даю складки, они будут рисовать над картой div или ниже, а не между ними. Есть ли способ изменить это? </p>

Answer 1

Вот спецификация о том, как все должно быть нарисовано. Я думаю, что это правило 9, которое охватывает два абсолютно позиционированных элемента с положительным ненулевым z-индексом, но, честно говоря, я не совсем хорошо представляю, как все объекты в вашей ситуации расположены и где они находятся в дереве. точно знать, какие правила должны применяться. Некоторые примеры HTML могут помочь людям интерпретировать правила для вашей конкретной ситуации.

Самым простым решением было бы поместить складки в тот же родительский элемент, что и маркеры, и убедиться, что они оба являются позициями: абсолютными, чтобы точно контролировать z-порядок с помощью z-индекса. Если они не имеют абсолютного положения, то, вероятно, это будет дочерний порядок, который будет контролировать вещи.

Answer 2

Похоже, вам нужно будет добавить складки как дочерние элементы карты div с z-index меньше, чем маркеры, но больше, чем сама карта. Используйте JavaScript или jQuery для добавления объектов складок к объекту карты, когда это необходимо (я предполагаю, что содержимое объекта карты обновляется в определенных точках).