我被要求创建一个日历，当鼠标悬停在某些日期时，弹出窗口。我创建了日历和弹出窗口，但是我在弹出窗口顶部显示的某些日期有问题！
每个月都在自己的表中，并且我已经将每个表放在它自己的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;
}
这是我9月日历的代码：
<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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
答案 0 :(得分：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。
答案 1 :(得分：0)
您为弹出链接设置了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 */
}