CSS: не могу понять, как работать с z-index

Question

Прежде всего, я программист (Python, C, Java, Delphi и т. Д.), А не веб-разработчик / дизайнер.Я изо всех сил стараюсь быть (когда меня спрашивают), поэтому, пожалуйста, потерпите меня.: -)

У меня есть карта (фоновое изображение div).На карте я разместил несколько городов (div с изображением).Под городами есть машины (тоже с картинками).Каждый автомобиль может путешествовать в любой город (перетащить, я работаю над этим сейчас).Города и автомобили, при однократном нажатии, отображают всплывающие диалоги с дополнительной информацией.

До сих пор нет новостей.То, что нормальный программист хотел бы, чтобы карта на первом уровне (т. Е. Z-index 0) городов на следующих (т. Е. Z-index 10) автомобилях на следующем (z-index 20), потому что при перетаскивании автомобилей должны появлятьсянад городами, а не ниже) и, наконец, над всеми всплывающими окнами (z-index 999).

Однако это не так.Автомобили, когда их перетаскивают, «летают» над некоторыми городами и «проезжают» под некоторыми другими (полагаю, в зависимости от того, были ли они размещены до или после города при отображении страницы).

Я очень старался поместить div (чтобы нарисовать линии) между div карты и городами (т.е. z-index 5), но безрезультатно.

У всплывающих окон также есть проблемы.

Я также попробовал этот фрагмент кода:

jQuery(document).ready(function(){
   map_zindex = $("#map").css("z-index");
   $(".city").css("z-index", map_zindex+10);
   $(".car").css("z-index", map_zindex+100);
   $(".popup").css("z-index", map_zindex+200);
}); 

Все еще ничего не меняется (даже небольшой прогресс).Ничего такого.Хуже всего то, что при проверке с помощью Firebug я получал z-index: auto; для всех этих элементов.

Я знаю, что, должно быть, что-то делаю совершенно неправильно, но что это?Я надеюсь, что моя неприязнь к CSS не вызывает весь этот беспорядок.

Answer 1

Позиционированные элементы (абсолютно или относительно) всегда будут иметь более высокий z-индекс, чем другие элементы, поэтому, если вы не позиционируете все свои элементы (вам не нужно устанавливать их значения top и left, только их position значение), это будет возможной причиной некоторых проблем.

Однако, поскольку вы говорите, что элементы отображаются в Firebug как z-index: auto, я подозреваю, что что-то еще не так.Применяется ли z-index только для jQuery?В этом случае похоже, что код выполняется до того, как элементы станут доступны на странице.В противном случае, дайте нам js-скрипку, воссоздающую эту ошибку.

Также обратите внимание, что с помощью перетаскиваемых jQuery вы можете изменять их z-индекс по мере их перетаскивания: http://jqueryui.com/demos/draggable/#visual-feedback

Answer 2

Решено:

Проблема заключалась в том, что в цикле {% для города в городах%}, который вставлял все города на карте, я создал все другие элементы (автомобили и всплывающие окна) как детей города. Это сбивало с толку, потому что я не знал, что дети наследуют z-индекс от своих родителей (это «каскадирование» в CSS в любом случае). Теперь я сделал все элементы дочерними для элемента #map, и все в порядке.

Спасибо всем за информацию. Это помогло больше, чем вы можете себе представить.

Answer 3

Начальным значением z-index является 'auto'. Поэтому, если вы где-то не определили числовой z-индекс для #map, вы попытаетесь присвоить значение 'auto10', что недопустимо, z-index не изменится.

Таким образом, вам нужно присвоить числовое значение z-index #map, чтобы оно заработало. Чтобы получить ожидаемый результат, вы также должны сделать число возвращаемого числового значения:

map_zindex = Number($("#map").css("z-index"));

В противном случае (при условии, что z-индекс равен 10), вы присваиваете .city значение 1010 (потому что css («z-index») возвращает строку «10», а не число 10, что приводит к строке -конкатенация вместо дополнения)

Answer 4

Z-индекс элемента вступает в силу только при изменении позиции элемента по умолчанию.Я бы порекомендовал что-то вроде следующего.

.popup {
  position: relative;
  z-index: 10;
}

Также имейте в виду, что порядок элементов DOM также может влиять на положение элемента.