html - CSS z-index 之谜

Question

我在 CSS 和 z-index 方面遇到了一些问题。让我给你举个例子

假设在第一时刻它只出现标签指针。然后，当我单击其中一个指针时，会出现一个标记球。我希望标签指针始终出现在标签球下方，我也希望每次打开标签球时它都出现在所有其他打开的标签球上方。

我的 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;
}

'标签'是所有的集团，其背景是标签指针图像。但是，此图像有一些阴影，我只希望可以单击某个区域。然后，'small' div 具有此功能。 'globe' 和 'in-globe' div 是写地球内容的地方(它可能是唯一的 div，由于历史原因有两个)，'globe-arrow' div 基本上是一个小图像在地球上显示这个小箭头。

对于这种结构，它不起作用。在同一个企业集团中，一个地球总是在一个标签上，但是之前在 html 代码中定义的整个企业集团完全出现在一个新的标签下。同样，尽管 JavaScript 总是在较旧的地球之后(逻辑上)插入地球，但在加载页面时插入标签集团，然后重叠工作就像我说的那样。

你能提出一个聪明的方法来实现我的目标吗？认为我对根据标签定位地球感兴趣，因为当我在打开地球的情况下拖动指针时，我希望地球通过 CSS 而不是 JavaScript 随之移动。

Answer 1

将 .globe-arrow 的 z-index 设置为 3