在表单元格内部时的CSS z-index问题 [英] CSS z-index issue when inside of table cell

问题描述

我有一个日历/表，当你悬停在每一天，我们有一个小弹出，绝对位于每个单元格下面。

I have a calendar/table that when you hover over each day we have a small popup that is absolutely position below each cell.

为了做这项工作，我在每个单元格中添加了< div style =relative/> 。在FF中工作正常，虽然当你将鼠标悬停在它的IE中的z-index被忽略。

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.

我已经尝试了所有我可以想到的工具在IE 7 + 8中工作。

I have tried all of the hacks I can think of to get it to work in IE 7 + 8.

推荐答案

不需要在 .wrapper div中的所有个别 z-indexes code> td 元素（他们都可以设置为 1 我相信），并设置以下属性：

No need for all the individual z-indexes on the .wrapper div's inside the td elements (they can all be set to 1 I believe), and set these properties:

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

使用firebug和IE的开发人员工具， Firefox以及IE7和8。

Using firebug and IE's developer tools, it appeared to me that it was working in Firefox and IE7 and 8.

这篇关于在表单元格内部时的CSS z-index问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！