11

我正在创建一个基于 CSS/XHTML 表格的日历原型，最终将使用 PHP 为 Simple Updates 内容管理系统生成。我遇到了使用绝对定位来创建一个弹出窗口的问题，该弹出窗口将显示一天中的所有事件，而单元格中的事件超出了容纳范围。问题可以在这里看到：

http://sutest.bravehost.com/

如您所见，弹出窗口在 IE7 和 IE6 中的多日事件和日期下弹出。在弹出窗口上放置一个 z-index 解决了 Firefox 中的问题。我尝试在弹出窗口上放置各种 z-index 值，更改弹出窗口和相关元素的显示属性，以及许多其他不同的方法，但没有成功。

HTML如下：

<td valign="top"><div>
    <div class="date">25</div>
    <ul>
        <li class="single"><a href="#">History</a></li>
        <li class="single"><a href="#">Biology</a></li>
        <li class="single"><a href="#">Computers</a></li>
        <li class="single"><a href="#">POTCH</a></li>
        <li class="single"><a href="#">Precal</a></li>
        <li class="more"><a href="#">+3 More</a></li>
    </ul>
    <div class="popup">
        <span class="close"><a href="#">X</a></span>
        <ul>
            <li class="single"><a href="#">History</a></li>
            <li class="single"><a href="#">Biology</a></li>
            <li class="single"><a href="#">Computers</a></li>
            <li class="single"><a href="#">POTCH</a></li>
            <li class="single"><a href="#">Precal</a></li>
            <li class="single"><a href="#">Science PC</a></li>
            <li class="single"><a href="#">Physics</a></li>
            <li class="single"><a href="#">Construction</a></li>
        </ul>
    </div>
</div></td>

这是表格中带有硬编码弹出窗口的单元格。第一个列表包含正常的可见事件。包含第二个 div 的 div 是弹出窗口。它应该在多日活动中显示：

<td valign="top" class="blank"><div>
    <div class="date">2</div>
    <ul>
        <li style="background-color:plum;">&nbsp;<img src="endr.png" alt="." /></li>
    </ul>
</div></td>

我正在使用列表项来“伪造”多日活动。今天的 li 被设置为在 IE 6 和 7 中显示在弹出窗口上的栏的部分。

与弹出窗口相关的 CSS：

.popup {
position:absolute;
top:-1px;
background-color:white;
border:1px solid black;
overflow:visible;
padding:10px;
width:auto;
z-index:1;
margin-left:-1px;
}

对于多日活动：

li {
margin:2px 0;
padding:0 0 2px 5px;
white-space:nowrap;
}

我试图通过反复搜索谷歌并尝试其他问答网站来解决这个问题。

任何帮助将不胜感激！

4

5 回答 5

22

Usingposition: relative在 IE 中相对定位的元素内设置了一个新的 z-index 堆叠上下文。

相对定位元素内部的元素会根据它们的 进行堆叠z-index，但是在与父元素之外的元素交互时，使用父元素的z-index。这就是为什么弹出窗口显示在多日事件元素下方的原因（因为即使元素上没有明确显示z-index，文档中“稍后”出现的元素隐含地z-index比之前出现的元素更高）

要修复它，您可以

  • 不在position-relative单元格上使用并将弹出窗口相对于整个文档定位
  • 给容器<div>一个z-index比文档中后面那个更高的容器。

我发现z-index使用 JavaScript 以编程方式更改是最好的，因为它可以最大限度地减少与页面其余部分的奇怪交互（即在z-index打开时设置较高，并在关闭时将其重置为默认值）

一些讨论这个问题的博客文章：

于 2009-07-01T18:53:07.597 回答
2

如果您使用某种编程语言（如 PHP、.NET 等）制作此表。

你可以做这样的事情：

计算表的总行数，然后以此总数开始 Z-Index，然后减少计数器直到最后一行。这样做，您的第一行将具有最大的 z-index 和最后一行 te 较低。

<table> position relative
<tr> nothing
<td> nothing
<div> position relative
<element position absolute>
</div>
</td></tr></table>

----
Table Loop:

$nZ = count($resource);
foreach($resource as $line) {
 <tr><td>
   <div style="z-index: $nZ">content</div>
 </td></tr>
 $nZ--;  // Decrement nZ
}
----

C呀！

于 2012-11-28T22:19:59.117 回答
1

您可能想尝试设置包含元素的 z-index。因此，您的弹出窗口的 z-index 将为 1（或 2），而您的容器的 z-index 将为 0（或 1）。

于 2009-07-01T18:10:54.453 回答
0

不确定这是否有帮助，但 z-index 属性适用于定位的、相对的、绝对的、固定的项目http://www.w3schools.com/Css/pr_pos_z-index.asp

编辑：这意味着 li 元素可能会完全忽略它......

于 2009-07-01T18:17:28.047 回答
0

您是否尝试过在多日事件和日期元素上设置比弹出 div 上的 z-index 更低的 z-index？此外，确保任何具有 z-index 属性的元素都具有 position: absolute （因此可能需要稍微处理一下布局问题）。

于 2009-07-01T18:28:00.510 回答