CSS z-index загадка

Question

У меня есть некоторые проблемы с CSS и z-index. Позвольте мне показать вам пример

пример http://img151.imageshack.us/img151/4714/tagmistery.jpg

Предположим, что в первый момент появляются только указатели тегов. Затем, когда я нажимаю на один из этих указателей, появляется тег глобуса. Я хочу, чтобы указатели тегов всегда отображались под глобусами тегов, и я также хочу, чтобы каждый раз, когда я открывал глобус тега, он появлялся поверх всех остальных открытых глобусов тегов.

Моя структура div:

<div id="t01" class="tag">
    <div class="small">
        <div class="globe">
            <div class="in-globe">
                <!--tag globe content-->
            </div>
        </div>
        <div class="globe-arrow"></div>
    </div>
</div>

И соответствующий код CSS это:

.tag {
    z-index: 3;
    position: absolute;
    left: 0; /*JavaScript modified*/
    top: 0;  /*JavaScript modified*/
    width: 19px;
    height: 26px;
    padding: 0 11px 10px 15px;
    background: url('../../images/zoom/tag.png') no-repeat center;
}
.small {
    cursor: pointer;
    width: 19px;
    height: 26px;
}
.globe-arrow {
    position: absolute;
    left: 23px;
    bottom: 30px;
    width: 8px;
    height: 6px;
    background: url(../../images/zoom/tag_arrow_UR.gif) no-repeat;
    z-index: 5;
}
.globe {
    position: absolute;
    left: 23px;
    bottom: 30px;
    z-index: 4;
}
.in-globe {
    font-size: 11px;
    margin: 0 0 3px 3px;
    padding: 3px;
    background: #FFF;
    border: 1px solid #000;
}

«Тег» - это весь конгломерат, а его фон - изображение указателя тега. Тем не менее, это изображение имеет некоторые тени, и я хочу, чтобы только определенную зону можно было щелкнуть. Тогда «маленький» div имеет эту функцию. В разделах «глобус» и «в глобусе» пишется содержимое глобуса (это может быть единственный блок, существует два по историческим причинам), а блок «глобус-стрела» в основном представляет собой небольшое изображение для покажите эту маленькую стрелку над земным шаром.

С этой структурой это не работает. В одном и том же конгломерате глобус всегда находится над тегом, но весь конгломерат, определенный ранее в html-коде, отображается полностью под новым. Точно так же, хотя JavaScript вставляется в глобус всегда после старого (логически), конгломерат тегов вставляется при загрузке страницы, а затем перекрытие работает, как я сказал.

Можете ли вы предложить разумный способ достичь моей цели? Подумайте, мне интересно расположить глобус в соответствии с тегом, потому что когда я перетаскиваю указатель с открытым глобусом, я хочу, чтобы глобус перемещался вместе с ним с помощью CSS, а не JavaScript.

Answer 1

Я решил проблему.Там нет волшебного способа сделать это.Мне пришлось изменить способ, которым я структурирую теги.Кажется, что z-index наследуется от контейнера div, тогда как у родителя меньше z-индекса, сын первого родителя с таким же z-индексом появляется под первым, хотя у этого сына больший z-индекс.Да, это очень запутанно.

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

Я хочу, чтобы каждый раз, когда я открывал новый глобус тега, он появлялся поверх открытых глобусов.Вопреки моим желаниям, мне пришлось использовать JavaScript для этого, потому что с тем же z-index браузер показывал поверх последнего определенного div.Это безобразноЯ строю стек z-index, который увеличивается с увеличением количества глобусов и уменьшается при их закрытии.Затем я просто редактирую файл CSS, чтобы поместить этот новый z-индекс на новый глобус.

Спасибо за ваше внимание и помощь :) Надеюсь, это кому-нибудь пригодится.

Answer 2

дает .globe-arrow z-индекс 3