Question

好的，所以我遇到了这个问题，我无法理解。我看过很多解决方案，但没有一个有效。我正在使用一个具有嵌入式浏览器的软件 - 据我所知，它的IE7。

我将嵌入式浏览器链接到HTML文件。在文件中，我根据通过软件传递给浏览器控件的值，通过JavaScript生成HTML。

我正在构建的HTML是一个图表。

我有一个容纳div的容器div。在其中我有一个div浮动左边，保持图形的比例。然后，我有一个名为graph的div，它将显示数据。这个div是x可滚动的并且留有边距，因此它不会与scale div重叠。通过JavaScript我构建HTML代码，然后将图形div的innerHTML设置为新代码。

我构建的代码包含一个列div。在列div中有6个其他div位于绝对位置，并给出一个顶部以显示它们与刻度垂直对齐并基于传递给控件的值。

列数取决于发送的值的数量，并将更改。

所有这一切都正常，定位的div显示在我想要的列中。

问题在于我希望每个定位的div都有一个显示实际值的工具提示。在我必须使用的浏览器控件中，这些工具提示始终显示在下一列中定位的div后面，我需要它们出现在所有内容之上。

在下面的示例中，工具提示显示在右侧列中的数据上方。但是，在嵌入式IE7浏览器中，右侧列中的数据显示在工具提示上方。

    <style>
    .container
    {
        width: 800px;
        height: 600px;
        background-color: #dfd;
        overflow-x: scroll;
    }
    .scale
    {
        width: 100px;
        height: 520px;
        background-color: #fdd;
        float: left;
    }
    .graph
    {
        width: 1000px;
        height: 520px;
        background-color: #ddf;
    }
    .column
    {
        width: 20px;
        height: 520px;
        float: left;
        background-color: #fdf;
    }
    .value1
    {
        position: absolute;
        width: 24px;
    }
    .value2
    {
        position: absolute;
        width: 24px;
    }
    .value3
    {
        position: absolute;
        width: 24px;
    }
    .tooltip span
    {
        display: none;
        width: 100px;
        background-color: #fff;
        border: 1px solid #000;
        position: relative;
        z-index: 1;
    }
    .tooltip:hover span
    {
        display: inline-block;
        position: absolute;
        left: 24px;
        z-index: 2;
    }

</style>

<body>
    <div class="scale">Blah blah</div>
    <div class="container">

    <div class="graph">
        <div class="column">
            <div class="value1" style="top: 100px;"><a class="tooltip" href="#">1a<span>tooltip data</span></a></div>
            <div class="value2" style="top: 150px;">2a</div>
            <div class="value3" style="top: 200px;">3a</div>
        </div>
        <div class="column">
            <div class="value1" style="top: 130px;">1b</div>
            <div class="value2" style="top: 160px;">2b</div>
            <div class="value3" style="top: 180px;">3b</div>
        </div>
        <div class="column">
            <div class="value1" style="top: 90px;">1c</div>
            <div class="value2" style="top: 110px;">2c</div>
            <div class="value3" style="top: 140px;">3c</div>
        </div>
    </div>
</div>
</body>

jsfiddle简单的例子。

我尝试过更改位置：绝对和：相对于各种元素。我尝试过设置各种元素的z-index，结果总是一样的。工具提示显示在右侧列中定位值的后面。

Answer 1

解决了它。

问题是我创建的每个列div重置了堆叠顺序，因此在它之前的列之上。上一列的子项（包括工具提示）将显示在新列的下方。

解决方案是在创建JavaScript时为JavaScript中的每一列设置z-index。我将其设置为（99999 - theLoopIndex），以便每个后续列的z-index比前一列少一个。这意味着前一列的子项将显示在上面 - 具有比后续列及其子项更高的z索引。

嵌入式IE7浏览器工具提示问题

1 个答案: