Html 使用CSS弹出窗口时表格中的CSS z索引问题

我被要求创建一个日历，当鼠标悬停在某些日期上时，这些日期会弹出窗口。我创建了日历和弹出窗口，但是我在弹出窗口顶部显示的一些日期方面遇到了问题

每个月都在它自己的表中，我将每个表放在它自己的div中，并指定了一个z索引，因此每个表的弹出窗口显示在其右侧的表的顶部，但在同一个表中，该弹出窗口位于分配了弹出窗口的任何其他日期下

您可以在此处查看我的示例：

请注意将鼠标悬停在9月2日上方时的行为：9月15日和22日的粗体日期位于我的弹出框顶部

我尝试过调整#popup、#popup a和#popup span的z-index aqnd位置，但没有成功。我已经找到了一些可能的解决方案，但它们与IE bug有关，而且我在IE8和FF8中得到了相同的行为，所以我很确定我做错了什么，而不是浏览器问题

这是我的CSS：

.calMonth {
    border - left: 1px solid #000;
border-top: 1px solid # 000;
    text - align: center;
    table - layout: fixed;
}

.calMonth td {
    border - bottom: 1px solid #000;
border-right: 1px solid # 000;
}

.calMonthHeader {
    font - weight: bold;
    font - size: 1.2em;
    color: #026181;
background-color: # d6eff7;
}

.calWeekDays {
    font - weight: bold;
    background - color: #bae4f2;
    font - size: .7em;
}

.calStatusClosed {
    background - color: #CCC;
}

.calStatusOpenReg {
    background - color: #feda91;
}

.calStatusOpenLate {
    background - color: #C6F;
}

.calStatusOpenEarly {
    background - color: #764601;
}

.calStatusSundown {
background-color: # c21802;
}

.calStatusSpecial {
    background - color: #ff9000;
}

#popup {
    color: #000;
}

# popup a,
    #popup a: visited {
        position: relative;
        display: block;
        text - decoration: none;
        font - size: 1em;
        font - weight: bold;
        color: #000;
z-index: 0;
}

# popup a span {
            display: none;
        }

        #popup a: hover {
            /*background-color: #e9e9e2;*/
        }

        /* the IE correction rule */#popup a: hover {
            text - indent: 0; /* added the default value */
        }

        #popup a: hover span {
            display: block;
            position: absolute;
            top: 15px;
            left: 30px;
            width: 250px;
            margin: 0px;
            padding: 10px;
            color: #000;
font-weight: normal;
background: # fff;
            text - align: left;
            border: 4px solid #7ecce7;
z-index: 100;
}

这是我九月日历的代码：

<div style="position:relative; z-index:11;">
    <table width="170" border="0" cellspacing="0" cellpadding="3" class="calMonth">
        <tr>
            <td colspan="7" class="calMonthHeader">
                <strong>SEPTEMBER 2012</strong>
            </td>
        </tr>
        <tr class="calWeekDays">
            <td>S</td>
            <td>M</td>
            <td>T</td>
            <td>W</td>
            <td>T</td>
            <td>F</td>
            <td>S</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">1<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
        </tr>
        <tr>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">2<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">3<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
            <td class="calStatusClosed">4</td>
            <td class="calStatusClosed">5</td>
            <td class="calStatusClosed">6</td>
            <td class="calStatusClosed">7</td>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">8<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
        </tr>
        <tr>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">9<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
            <td class="calStatusClosed">10</td>
            <td class="calStatusClosed">11</td>
            <td class="calStatusClosed">12</td>
            <td class="calStatusClosed">13</td>
            <td class="calStatusClosed">14</td>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">15<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
        </tr>
        <tr>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">16<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
            <td class="calStatusClosed">17</td>
            <td class="calStatusClosed">18</td>
            <td class="calStatusClosed">19</td>
            <td class="calStatusClosed">20</td>
            <td class="calStatusClosed">21</td>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">22<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
        </tr>
        <tr>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">23<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
            <td class="calStatusClosed">24</td>
            <td class="calStatusClosed">25</td>
            <td class="calStatusClosed">26</td>
            <td class="calStatusClosed">27</td>
            <td class="calStatusClosed">28</td>
            <td class="calStatusClosed">29</td>
        </tr>
        <tr>
            <td class="calStatusClosed">30</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>

2012年9月
s
M
T
W
T
F
s
4.
5.
6.
7.
10
11
12
13
14
17
18
19
20
21
24
25
26
27
28
29
30

当弹出窗口出现时，向活动TD添加一个类，以将z索引设置得比其他类更高

或者你可以这样做：

#popup {
    z-index:0;
    position:relative; /* Needed for the z-index to apply */
}
#popup:hover { z-index:1; }

---

你真的不应该在所有这些上使用相同的ID。在同一页面上有重复ID是无效的HTML。

当弹出窗口出现时，向活动TD添加一个类，将z索引设置为比其他索引更高

或者你可以这样做：

#popup {
    z-index:0;
    position:relative; /* Needed for the z-index to apply */
}
#popup:hover { z-index:1; }

---

你真的不应该在所有这些上使用相同的ID。在同一页上有重复的ID是无效的HTML。

您为弹出链接设置了一个z索引值，该值是在没有明显原因的情况下拾取的。只要把它取下来就可以了

此块位于页面的页眉中

CSS

#popup a, #popup a:visited {
    position: relative;
    display: block;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    color: #000;
    /* z-index: 0;  remove this */
}

---

您为弹出链接设置了一个z索引值，该值是在没有明显原因的情况下拾取的。只要把它取下来就可以了

此块位于页面的页眉中

CSS

#popup a, #popup a:visited {
    position: relative;
    display: block;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    color: #000;
    /* z-index: 0;  remove this */
}

---

马修，谢谢！！这个解决方案起了作用，安德烈斯也起了作用。我真的很感谢你的帮助！：）我希望我能把这两个都作为公认的答案…PS：关于ID，我知道。。。但我想先解决这个问题，然后再调整其他问题！：）谢谢你的提醒！正如你所知道的，旧版本的IE在没有我建议的情况下会有问题。他们不正确地处理z索引，迫使你不得不将它们添加到家长和诸如此类的人中。马修，谢谢！！这个解决方案起了作用，安德烈斯也起了作用。我真的很感谢你的帮助！：）我希望我能把这两个都作为公认的答案…PS：关于ID，我知道。。。但我想先解决这个问题，然后再调整其他问题！：）谢谢你的提醒！正如你所知道的，旧版本的IE在没有我建议的情况下会有问题。他们不正确地处理z索引，迫使你不得不将它们添加到家长和诸如此类的人中。安德烈斯，谢谢！从我第一次为这些设置z索引的努力开始，我一定还在那里，并且在查看代码两天后没有注意到这一点。问题解决了！安德烈斯，谢谢你！从我第一次为这些设置z索引的努力开始，我一定还在那里，并且在查看代码两天后没有注意到这一点。问题解决了！