Je crée un prototype d'un calendrier basé sur des tableaux CSS / XHTML qui sera finalement généré avec PHP pour le système de gestion de contenu de mises à jour simples. J'ai rencontré un problème d'utilisation d'un positionnement absolu pour créer une popup qui afficherait tous les événements en une journée lorsqu'il y a plus que ce sera dans une cellule. Le problème peut être vu ici:
http://suTest.bravehost.com/ P >
Comme vous pouvez le constater, la pop-up apparaît sous l'événement et la date de plusieurs jours dans IE7 et IE6. Mettre un index Z sur la popup fixe le problème dans Firefox. J'ai essayé de mettre toutes sortes de valeurs Z-index sur la fenêtre contextuelle, de modifier la propriété d'affichage de la fenêtre contextuelle et de l'élément associé, ainsi que de nombreuses autres approches variées, sans succès. P>
Le HTML est aussi Suit: P>
li {
margin:2px 0;
padding:0 0 2px 5px;
white-space:nowrap;
}
5 Réponses :
Vous pouvez essayer d'essayer de définir l'index Z de l'élément contenant. Donc, votre pop up aurait un indice Z de 1 (ou 2) et votre conteneur aurait un index Z de 0 (ou 1).
Je ne sais pas ce que tu veux dire ... J'ai essayé de définir le z-index de l'événement de plusieurs jours à 0 (et plusieurs valeurs négatives), mais en vain, je suppose que l'événement n'est pas absolument positionné.
Je suggère également d'utiliser des Z-index qui vous donnent une chance de changer d'avis plus tard et d'ajouter un autre élément entre les deux couches alors quelque chose comme: 0, 10, 20 ...
Je ne sais pas si cela aidera, mais la propriété Z-Index s'applique aux éléments positionnés, relatifs, absolus, fixes http://www.w3schools.com/css/pr_pos_z-index.asp
Modifier: ce qui signifie que l'élément LI pourrait l'ignorer complètement ...
D'accord. J'avais oublié que Z-Index a travaillé sur plus que des éléments absolument positionnés. Je viens d'essayer d'ajouter de la position: relative; et z-index: 0; au jeu de règles de sélecteur Li. Malheureusement, cela n'a pas corrigé le problème.
Avez-vous essayé de mettre un index Z inférieur sur les éléments d'événement et de date de plusieurs jours que l'index Z sur le popup DIV? En outre, assurez-vous que tout élément avec l'attribut Z-Index a la position: Absolute (afin que cela puisse avoir à jouer avec des problèmes de mise en page un peu).
Oui, j'ai essayé de positionnement des éléments fautifs et de leur donner un index Z inférieur à celui de la popup. Ne semble pas fonctionner. = P
Utilisation de Les éléments à l'intérieur de l'élément relativement positionné seront empilés en fonction de leur Pour le réparer, vous pouvez soit
J'ai trouvé que modifier le Certains postes de blog qui parlent de ce problème:
Position: relative configure un nouveau contexte d'empilement de z-index dans l'élément relativement positionné dans IE.
z-index , mais lorsqu'ils interagissent avec des éléments en dehors de l'élément parent, le z-index de la le parent est utilisé. C'est pourquoi la popup affiche ci-dessous l'élément d'événement de plusieurs jours (car même s'il n'y a pas d'index explicite z-index sur l'élément, des éléments qui arrivent "plus tard" dans le document ont implicitement un plus élevé z-index que ceux qui arrivent avant)
positionnem-relatif sur la cellule et positionner la fenêtre contextuelle par rapport à l'ensemble du document
A plus élevé
z-index que celui plus ultérieur dans le document.
z-index de manière programmatique avec JavaScript pour être le mieux, car il minimise des interactions étranges avec le reste de la page (c'est-à-dire définir le z-index plus élevé lorsqu'il est ouvert et réinitialisez-le en défaut lorsqu'il est fermé)
0 commentaires
Si vous faites cette table avec un langage de programmation tel que PHP, .NET, etc.
Vous pouvez faire quelque chose comme ceci: p>
comptez les lignes totales de votre table, puis commencez z -Index avec le total de ce total, puis diminue le compteur jusqu'à la dernière ligne. Faire cela, votre première ligne aura le plus grand index Z et la dernière rangée Te plus faible. P>
<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
}
----
FYI: Cela fait la même chose dans IE8 aussi ...