CSS 在 IE 6 和 7 中使用列表和表格进行绝对定位/Z-Index 时遇到问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1070544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Having trouble with absolute positioning / Z-Index with Lists and Tables in IE 6 and 7
提问by jimr
I'm creating a prototype of a CSS/XHTML tables-based calendar that eventually will be generated with PHP for the Simple Updates content management system. I've run into a problem with using absolute positioning to create a popup that would show all the events in a day when there are more than will fit in a cell. The problem can be seen here:
我正在创建一个基于 CSS/XHTML 表格的日历原型，最终将使用 PHP 为简单更新内容管理系统生成。我在使用绝对定位来创建一个弹出窗口时遇到了一个问题，该弹出窗口将显示一天中的所有事件，当一个单元格中的内容超出容量时。问题可以在这里看到：
As you can see, the popup pops under the multi-day event and date in both IE7 and IE6. Putting a z-index on the popup fixed the problem in Firefox. I've tried putting all sorts of z-index values on the popup, changing the display property of the popup and related element, as well as many other varied approaches, with no success.
如您所见，弹出窗口在 IE7 和 IE6 中的多天事件和日期下弹出。将 z-index 放在弹出窗口中修复了 Firefox 中的问题。我尝试将各种 z-index 值放在弹出窗口中，更改弹出窗口和相关元素的显示属性，以及许多其他不同的方法，但都没有成功。
The HTML is as follows:
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>
This is the cell from the table with the hard-coded popup. The first list contains the normal, visible events. The div containing the second div is the popup. It should be displaying over the multi-day event:
这是带有硬编码弹出窗口的表格中的单元格。第一个列表包含正常的可见事件。包含第二个 div 的 div 是弹出窗口。它应该在多日事件中显示：
<td valign="top" class="blank"><div>
<div class="date">2</div>
<ul>
<li style="background-color:plum;"> <img src="endr.png" alt="." /></li>
</ul>
</div></td>
I'm using list items to "fake" the multi-day event. The li in this day is styled to be the section of the bar seen to render over the popup in IE 6 and 7.
我正在使用列表项来“伪造”多日事件。今天的 li 被设计为在 IE 6 和 7 中呈现在弹出窗口上的栏部分。
The CSS relating to the popup:
与弹出窗口相关的 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;
}
And to the multi-day event:
对于为期多天的活动：
li {
margin:2px 0;
padding:0 0 2px 5px;
white-space:nowrap;
}
I've tried to fix this problem by searching Google repeatedly and trying other Q&A sites.
我尝试通过反复搜索 Google 并尝试其他问答网站来解决此问题。
Any help would be greatly appreciated!
任何帮助将不胜感激！
回答by jimr
Using position: relativesets up a new z-index stacking context inside the relatively positioned element in IE.
Usingposition: relative在 IE 中相对定位的元素内设置一个新的 z-index 堆叠上下文。
Elements inside the relatively positioned element will be stacked according to their z-index, but when interacting with elements outside of the parent element, the z-indexof the parent is used. This is why the popup shows below the multi-day event element (because even though there's no explicit z-indexon the element, elements that come "later" in the document implicitly have a higher z-indexthan ones that come before)
相对定位的元素内部的元素会根据它们的 进行堆叠z-index，但是当与父元素之外的元素交互时，会使用父元素的z-index。这就是弹出窗口显示在多天事件元素下方的原因（因为即使元素上没有明确z-index说明，文档中“稍后”出现的元素隐含地z-index比之前的元素高）
To fix it, you can either
要修复它，您可以
- Not use
position-relativeon the cell and position the popup relative to the entire document - Give the container
<div>a higherz-indexthan the one later on in the document.
- 不在
position-relative单元格上使用并相对于整个文档定位弹出窗口 - 给容器
<div>一个z-index比文档后面的更高的容器。
I've found that changing the z-indexprogrammatically with JavaScript to be best, since it minimizes weird interactions with the rest of the page (i.e. set the z-indexhigher when it is opened, and reset it back to default when it is closed)
我发现z-index使用 JavaScript 以编程方式更改是最好的，因为它最大限度地减少了与页面其余部分的奇怪交互（即在z-index打开时设置更高，并在关闭时将其重置为默认值）
Some blog posts that talk about this problem:
一些谈论这个问题的博客文章：
回答by Ramiro
If you are making this table with some programming language such as PHP, .NET, etc.
如果您使用某种编程语言（例如 PHP、.NET 等）制作此表。
You can make something like this:
你可以做这样的事情：
Count the total rows of your table, then start Z-Index with the this total, then decrease the counter until the last row. Doing this, your first row will have the greatest z-index and the last row te lower.
计算表的总行数，然后以此总数开始 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 ya!
哟！
回答by Peter
You might want to try setting the z-index of the containing element. So, your popup would have a z-index of 1 (or 2) and your container would have a z-index of 0 (or 1).
您可能想尝试设置包含元素的 z-index。因此，您的弹出窗口的 z-index 为 1（或 2），而您的容器的 z-index 为 0（或 1）。
回答by SeanJA
Not sure if this will help, but the z-index property applies to items that are positioned, relative, absolute, fixed http://www.w3schools.com/Css/pr_pos_z-index.asp
不确定这是否有帮助，但 z-index 属性适用于定位、相对、绝对、固定的项目http://www.w3schools.com/Css/pr_pos_z-index.asp
Edit: Meaning that the li element might completely ignore it...
编辑：这意味着 li 元素可能会完全忽略它...
回答by Detect
Have you tried putting a lower z-index on the multi-day event and date elements than the z-index on the popup div? Also, make sure any element with the z-index attribute has position: absolute (so might have to play with layout issues a little).
您是否尝试在多天事件和日期元素上放置比弹出 div 上的 z-index 更低的 z-index？此外，确保任何具有 z-index 属性的元素都具有 position: absolute （因此可能需要稍微处理布局问题）。
