CSS z-index de question quand à l'intérieur de la cellule du tableau

J'ai un calendrier/table que lorsque vous passez la souris sur chaque jour, nous avons une petite popup qui est absolument la position en dessous de chaque cellule.

Pour faire ce travail, j'ai ajouté un <div style="relative" /> à l'intérieur de chaque cellule. Fonctionne bien dans les FF bien que lorsque vous passez au-dessus d'elle dans IE le z-index est ignoré.

J'ai essayé tous les hacks que je pense à le faire fonctionner sous IE 7 + 8.

n'ont pas ie ici maintenant, mais avez-vous essayé display: inline ?
Depuis déconner avec z-index est de se salir, la meilleure solution serait de mettre toutes les fenêtres pop-up dehors et après la table. Qui permettra de régler votre la superposition des questions.
Donnez-nous votre code d'homme! Où Arr ze C0dez!

InformationsquelleAutor John Magnolia | 2012-04-30

10

Pas besoin de toutes les z-indexes sur le .wrapper div à l'intérieur de la td éléments (ils peuvent tous être mis à 1 je crois), et définissez les propriétés suivantes:
```
/* 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;
}
```
À l'aide de firebug et IE developer tools, il m'est apparu qu'il travaillait dans Firefox et IE7 et 8.
- Cette demi travaillé bien que la position relative n'a pas de travail sur le td, j'ai donc ajouté un .wrapper div à l'intérieur de chaque cellule. Puis td:hover .wrapper
InformationsquelleAutor ScottS
0

Essayez de définir position: relative et un z-index sur le table ainsi que la td.

InformationsquelleAutor newtron
0

À l'intérieur de votre position absolue passez élément, la place d'un parent positionné div et de lui donner un z-index de comme 500. Ie7 considère absolue et relative des éléments positionnés comme ayant séparé z-index piles
```
<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>
```
Quelque chose comme ça, je suppose que
- Belle idée pour contourner ce problème, bien que cela aussi n'a fait aucune différence
InformationsquelleAutor Pete Leaning
0

J'ai utilisé cela pour m'aider avec un problème similaire avant:
http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

Si ce n'aide pas importe si vous donner à la table elle-même un z-index de 1 ou quelque chose de plus faible?
- J'ai été en mesure d'atteindre cet objectif dans smarty bien que a eu aucun effet
- Oh, avez-vous le code pour moi d'avoir un coup d'oeil à?
- Même type de réponse que @JustinY en incrémentant le z-index
- Vérifiez dès maintenant la démo, j'ai ajouter ceci dans smarty au lieu de jquery
- J'ai vérifié la démo c'est de travailler dans IE7 et IE8 sur mon ordinateur portable. Avez-vous fixé?
InformationsquelleAutor MÖRK
0

Le problème pourrait être causé par IE z-index de l'empilement de question, telle que décrite dans cette réponse à une question connexe.

Sur votre exemple, j'ai été en mesure de résoudre le z-index question par l'ajout d'un z-index à la div.wrapper à l'intérieur des cellules de la table.

Pour obtenir autour de la superposition avec des cellules avant et après, vous aurez à changer le z-index des cellules avec du Javascript.

Mais puisque vous embêter avec des z-index est de se salir, la meilleure solution serait de mettre toutes les fenêtres pop-up dehors et après la table. Qui permettra de régler votre la superposition des questions sans fou/hackish CSS.
- Malheureusement, ce ne serait jamais travailler dans un tableau de grille comme un calendrier à l'aide de votre méthode d'incrémentation de la z-index, parce que vous avez toujours une cellule avant/après/ci-dessus/ci-dessous
- Je vous recommande de prendre les fenêtres pop-up à l'extérieur de la table.
InformationsquelleAutor
0

Le problème est que .hoverContent est un enfant de .wrapper, vous devez la déplacer afin qu'il repose sur le même niveau:
```
 <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">...
```
Définir la td être position:relative, ensemble .hoverContent comme position:absolute et qui permettra de résoudre votre problème.
- Position relative de l'un ne fonctionne pas bien avec td
InformationsquelleAutor Francis Kim
0

Si votre composant est lui-même en position absolue et montré temporairement sur les autres composants, il suffit de l'ajouter à haut niveau c'est à dire la page et ensuite, vous n'avez pas à vous inquiéter à propos du tableau de l'ordre-z ou le type de positionnement.

InformationsquelleAutor Anthony Holland

Vous devez vous connecter pour publier un commentaire.