Avoir des problèmes avec le positionnement absolu / Z-Index avec des listes et des tableaux dans IE 6 et 7

Je suis de la création d'un prototype d'un CSS/XHTML tables calendrier qui sera finalement généré en PHP, pour la Simple et Mises à jour du système de gestion de contenu. J'ai couru dans un problème avec l'aide de positionnement absolu pour créer un popup qui permettrait d'afficher tous les événements dans un jour où il y a plus de rentrer dans une cellule. Le problème peut être vu ici:

http://sutest.bravehost.com/

Comme vous pouvez le voir, le popup pop dans le cadre de la journée de l'événement et de la date dans les deux IE7 et IE6. Mettre un z-index sur le popup résolu le problème dans Firefox. J'ai essayé de mettre toutes sortes de z-valeurs de l'indice sur le popup, la modification de la propriété d'affichage de la pop-up et un élément connexe, ainsi que de nombreuses autres approches diverses, sans succès.

Le HTML est comme suit:

<td valign="top"><div>
    <div class="date">25</div>
    <ul>
        <li class="single"><a href="#">History</a></li>
        <li class="single"><a href="#">Biology</a></li>
        <li class="single"><a href="#">Computers</a></li>
        <li class="single"><a href="#">POTCH</a></li>
        <li class="single"><a href="#">Precal</a></li>
        <li class="more"><a href="#">+3 More</a></li>
    </ul>
    <div class="popup">
        <span class="close"><a href="#">X</a></span>
        <ul>
            <li class="single"><a href="#">History</a></li>
            <li class="single"><a href="#">Biology</a></li>
            <li class="single"><a href="#">Computers</a></li>
            <li class="single"><a href="#">POTCH</a></li>
            <li class="single"><a href="#">Precal</a></li>
            <li class="single"><a href="#">Science PC</a></li>
            <li class="single"><a href="#">Physics</a></li>
            <li class="single"><a href="#">Construction</a></li>
        </ul>
    </div>
</div></td>

C'est la cellule de la table, avec codées en dur popup. La première liste contient la normale, les événements visibles. La div contenant le deuxième div est la popup. Il devrait être afficher sur le multi-événement de la journée:

<td valign="top" class="blank"><div>
    <div class="date">2</div>
    <ul>
        <li style="background-color:plum;">&nbsp;<img src="endr.png" alt="." /></li>
    </ul>
</div></td>

Je suis en utilisant la liste des articles pour "de faux" les multi-événement de la journée. Le li en ce jour est de style à la section de la barre vu rendre sur le pop-up dans internet explorer 6 et 7.

Le CSS concernant le popup:

.popup {
position:absolute;
top:-1px;
background-color:white;
border:1px solid black;
overflow:visible;
padding:10px;
width:auto;
z-index:1;
margin-left:-1px;
}

Et à la multi-événement de la journée:

li {
margin:2px 0;
padding:0 0 2px 5px;
white-space:nowrap;
}

J'ai essayé de résoudre ce problème en cherchant sur Google à plusieurs reprises et en essayant d'autres Q&Un sites.

Toute aide serait grandement appréciée!

source d'informationauteur

  1. 22

    À l'aide de position: relative met en place un nouveau z-index de l'empilement de contexte à l'intérieur de la position relative de l'élément dans IE.

    Éléments à l'intérieur de la position relative de l'élément va être empilés selon leur z-indexmais lors de l'interaction avec des éléments à l'extérieur de l'élément parent, le z-index du parent est utilisé. C'est pourquoi le pop-up montre ci-dessous le multi-événement de la journée de l'élément (parce que même si il n'y a pas explicite z-index sur l'élément, les éléments qui viennent "plus tard" dans le document implicitement ont plus de z-index que ceux qui viennent avant)

    Pour résoudre ce problème, vous pouvez soit

    • Pas utiliser position-relative sur la cellule et de la position de la fenêtre contextuelle par rapport à l'ensemble du document
    • Donner le conteneur <div> plus z-index que l'un plus tard dans le document.

    J'ai trouvé que la modification de la z-index par programmation avec JavaScript pour être le meilleur, car il minimise bizarre interactions avec le reste de la page (c'est à dire définir la z-index plus élevé lorsqu'il est ouvert, et le réinitialiser par défaut lorsqu'il est fermé)

    Certains articles de blog qui parlent de ce problème:

  2. 2

    Si vous êtes cette table avec quelque langage de programmation comme le PHP, .NET, etc.

    Vous pouvez faire quelque chose comme ceci:

    Compter le nombre de lignes de votre table, puis commencer à Z-Index avec la ce total, puis diminuer le comptoir jusqu'à la dernière ligne. Faisant cela, votre première ligne aura le plus de z-index et la dernière rangée de te baisser.

    <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
}
----

    C toi!

  3. 1

    Vous pourriez vouloir essayer le réglage de la z-index de l'élément conteneur. Donc, votre popup aurait un z-index de 1 (ou 2) et votre conteneur aurait un z-index de 0 (ou 1).

  4. 0

    Ne sais pas si cela va aider, mais la propriété z-index s'applique à des éléments qui sont placés, relatif, absolu, fixe http://www.w3schools.com/Css/pr_pos_z-index.asp

    Edit: ce qui Signifie que l'élément li peut complètement ignorer...

  5. 0

    Avez-vous essayé de mettre un bas de z-index de plusieurs jours sur les événements et la date éléments que le z-index sur le popup div? Aussi, assurez-vous de n'importe quel élément avec le z-index attribut position: absolute (donc peut-être à jouer avec les problèmes d'implantation un peu).