使用 CSS 弹出窗口时表格中的 CSS z-index 问题

Question

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

每个月都在自己的表格中，我已将每个表格放在自己的 div 中并分配了 z-index，因此每个表格的弹出窗口显示在右侧表格的顶部，但在弹出窗口位于分配有弹出窗口的任何其他日期下的同一张表。

您可以在此处查看我的示例：http://www.cityofpalmdale.org/departments/parks/drytown/index-test.html

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

我尝试以各种可以想象的方式调整#popup、#popup a 和#popup span 的z-index aqnd 定位，但没有成功。我找到了一些可能的解决方案，但它们与 IE 错误有关，而且我在 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>

Answer 1

当弹出窗口出现时，将一个类添加到活动 TD 以将 z-index 设置得比其他的更高。

要么这样做，要么你可以这样做：

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

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

Answer 2

您为弹出链接设置了一个 z-index 值，该值被无缘无故地拾取。只需将其删除即可正常工作。

此块位于页面标题中

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 */
}