Html 表格单元格内的 CSS z-index 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10385030/
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
CSS z-index issue when inside of table cell
提问by John Magnolia
I have a calendar/table that when you hover over each day we have a small popup that is absolutely position below each cell.
我有一个日历/表格，当您将鼠标悬停在每天的上方时，我们会在每个单元格下方有一个绝对位置的小弹出窗口。
To make this work I have added a <div style="relative" />inside each cell. Works fine in FF although when you hover over it in IE the z-index is being ignored.
为了完成这项工作，我<div style="relative" />在每个单元格内添加了一个。在 FF 中工作正常，尽管当您在 IE 中将鼠标悬停在它上面时，z-index 将被忽略。
I have tried all of the hacks I can think of to get it to work in IE 7 + 8.
我已经尝试了所有我能想到的技巧来让它在 IE 7 + 8 中工作。
回答by ScottS
No need for all the individual z-indexeson the .wrapperdiv's inside the tdelements (they can all be set to 1I believe), and set these properties:
不需要元素内 divz-indexes上的所有个体（我相信它们都可以设置为），并设置这些属性：.wrappertd1
/* add these two to your selector */
#calendar tbody td {
position: relative;
z-index: 1;
}
/* create this new selector */
#calendar tbody td:hover {
z-index: 2;
}
Using firebug and IE's developer tools, it appeared to me that it was working in Firefox and IE7 and 8.
使用 firebug 和 IE 的开发人员工具，在我看来它可以在 Firefox 和 IE7 和 8 中运行。
回答by newtron
Try setting position: relativeand a z-indexon the tableas well as the td.
尝试设置position: relative和z-index上table还有td。
回答by Pete Leaning
Inside your absolutely positioned hover element, place a relative positioned div and give it a z-index of like 500. Ie7 considers absolute and relative positioned elements as having seperate z-index stacks
在绝对定位的悬停元素内，放置一个相对定位的 div 并为其设置一个类似 500 的 z-index。Ie7 将绝对定位和相对定位的元素视为具有单独的 z-index 堆栈
<div class="hoverContent" style="opacity: 1; display: none;">
<div style='position:relative;z-index:500;'>
<a class="btn popme" >Book Now</a>
<p>content etc</p>
<label></label>
</div>
</div>
Something like that i guess
我猜是这样的
回答by M?RK
I have used this to help me with a similar problem before: http://css-tricks.com/snippets/jquery/fixing-ie-z-index/
我以前用它来帮助我解决类似的问题：http: //css-tricks.com/snippets/jquery/fixing-ie-z-index/
If this doesn't help does it matter if you give the table itself a z-index of 1 or something lower?
如果这没有帮助，是否将表本身的 z-index 设为 1 或更低？
回答by M?RK
The problem might be caused by IE's z-index stacking issue as described in this answerto a related question.
该问题可能是由 IE 的 z-index 堆叠问题引起的，如本对相关问题的回答中所述。
On your example I was able to fix the z-index issue by adding a z-index to the div.wrapperinside of the table cells.
在您的示例中，我能够通过div.wrapper在表格单元格内部添加 z-index 来解决 z-index 问题。
To get around the layering with cells before and after, you would have to change the z-index of the cells with Javascript.
要绕过之前和之后的单元格分层，您必须使用 Javascript 更改单元格的 z-index。
But since messing with z-index's is getting messy, the best solution would be to put all of the popups outside of and after the table. That will fix your layering issues without crazy/hackish CSS.
但是由于弄乱 z-index 变得很混乱，最好的解决方案是将所有弹出窗口放在表格的外面和后面。这将在没有疯狂/hackish CSS 的情况下解决您的分层问题。
回答by Francis Kim
The issue is that .hoverContentis a child of .wrapper, you should move it so that it sits on the same level:
问题是它.hoverContent是 的子级.wrapper，您应该移动它以使其位于同一级别：
<td class="available">
<div class="wrapper" style="z-index: 0;">
<span class="date">10</span><strong class="price">￡200</strong>
<a href="/victory_cottage/booking/init/id/1/from/1336611600/nights/7" class="link popme"></a>
</div>
<div class="hoverContent">...
Set the tdto be position:relative, set .hoverContentas position:absoluteand that will solve your issue.
设置td为position:relative，设置.hoverContent为position:absolute，这将解决您的问题。
回答by Anthony Holland
If your component itself is positioned absolutely and shown temporarily over other components, just add it to the top level i.e. the page and then you don't have to worry about the table's z-order or type of positioning.
如果您的组件本身被绝对定位并临时显示在其他组件之上，只需将其添加到顶层，即页面，然后您就不必担心表格的 z 顺序或定位类型。
