Geek asks and answers

CSS z-index issue when inside a table cell

I have a calendar / table that when you hover over every day, we have a small pop-up window that is located absolutely under each cell.

To do this work, I added <div style="relative" />inside each cell. Works great in FF, although when you hover over it in IE, the z-index is ignored.

enter image description here

I tried all the hacks that I can come up with to make it work in IE 7 + 8.

+5
source share
7 answers

It is not necessary for each individual z-indexesdiv .wrapperinside the elements td(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.

+9

position: relative a z-index table, td.

0

hover div z 500. 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>

- ,

0

IE z-index, , .

z-index, z-index div.wrapper .

, z- Javascript.

z-index , . / CSS.

0

, .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">...

td position:relative, .hoverContent position:absolute, .

0

If your component is positioned absolutely and temporarily displayed over other components, just add it to the top level, that is, to the page, and then you do not have to worry about the z-order table or the type of positioning.

0
source

More articles:


All Articles