Question

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

example http://img151.imageshack.us/img151/4714/tagmistery.jpg

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

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

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

使用这种结构它不起作用。在同一个企业集团中，地球仪总是在标签上，但之前在html代码中定义的整个集团完全出现在较新的集合体之下。以同样的方式，虽然一个地球是由JavaScript插入的，总是在较旧的一个之后（逻辑上），当页面加载时插入标签集合，然后重叠的工作就像我说的那样。

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

Answer 1

给.globe-arrow一个z-index为3

Answer 2

我解决了这个问题。没有神奇的方法可以做到这一点。我不得不改变我构建标签的方式。似乎z-index继承自容器div，然后就像父级具有较少的z-index一样，具有相同z-index的另一个父级的子级出现在第一个之下，尽管这个子具有更大的z-index。这是非常令人困惑的，是的。

简而言之，我定义了一个标签容器（用于定位标签），我定义了一个指针和一个标签地球仪。第一个z-index比第二个少。现在，由于所有具有z-index的div具有相同的级别，所有标记地球都出现在所有标记指针上。

我希望每当我打开一个新的标签地球仪时，它就会出现在已打开的地球仪上。根据我的愿望，我不得不使用JavaScript，因为使用相同的z-index，浏览器会显示最后定义的div。这很难看。我建立了一堆z-index，它随着更多的地球而增加，当我关闭它们时会减少。然后我简单地编辑css dinamicaly将这个新的z-index放到新的地球上。

感谢您的关注和帮助:)我希望这对某些人有用。

CSS z-index之谜

2 个答案: