Problème de superposition en CSS

J'essaie de superposer certains éléments en utilisant z-index et cela ne fonctionne pas du tout.Problème de superposition en CSS

Voici le CSS:

ul.ui-tabs-nav {list-style:none; float:left; display:block;padding:0; margin:6px 0px 0px 0px; width:85px; } 
    ul.ui-tabs-nav li {padding:0px 7px; height:64px; background:url(/templates/gspm_home/images/tab_bak.gif) top left no-repeat;} 
    ul.ui-tabs-nav li.ui-tabs-selected {z-index:100; display:block; background:url(/templates/gspm_home/images/tab_bak_current.gif) top left no-repeat; overflow:visible; } 
.ui-tabs-panel { z-index:1; width:360px; height:256px; padding:0;background:#fff; float:right; margin-top:6px;}

Lorsque la classe ui-tabs-selected est appelée, il est censé être une image de fond qui couche au-dessus du ui-tabs-panel. Mais rien ne se passe.

Voici le balisage HTML:

<ul class="ui-tabs-nav"> 
    <li class=""> <a href="#1" class="blue"> 
    Link</a></li> 
    <li class="ui-tabs-selected"> <a href="#2" class="blue">Link</a></li> 
    <li class=""> <a href="#3" class="blue"></a></li> 
    <li class=""> <a href="#4" class="blue">Link</a></li></ul> 


       <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="1"> 
       Content 
       </div> 
       <div style="" class="leading ui-tabs-panel" id="2"> 
       Content 
       </div> 
       <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="3"> 
       Content 
         </div> 
       <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="4"> 
       Content 
       </div>

Qu'est-ce que je manque?

www.gspm.org - le site est en construction. La section en question sont les onglets rotatifs. Utilise le plugin jQuery UI Tabs.

Source

2009-01-23 Jared

J'ai essayé le code HTML + CSS que vous avez donné et ça a l'air correct - je pense que peut-être il n'y a pas assez d'utilisation pour voir le problème. Avez-vous une URL pour cela? – Greg

Oui - www.GSPM.org - le site est encore en construction. C'est les onglets tournants au milieu. Utilise les onglets de l'interface utilisateur jQuery - cela peut causer un problème, je suppose. Merci! – Jared

Vous devez utiliser:

ul.ui-tabs-nav 
{ 
    list-style:none; 
    padding:0; 
    margin:6px 0px 0px 0px; 
    width:85px; 
    position: absolute; 
    z-index: 100; 
} 

ul.ui-tabs-nav li.ui-tabs-selected 
{ 
    display:block; 
    background: url(/templates/gspm_home/images/tab_bak_current.gif) top left no-repeat; 
    width: 100px 
}

z-index ne prendra effet que si l'élément a une position IIRC absolue ou relative. Vous devez également définir une largeur sur le li sélectionné - une image d'arrière-plan ne "s'échappera" pas même avec overflow: visible; (que vous pouvez maintenant supprimer).

Cela a fonctionné pour moi dans FireBug - j'espère que cela fonctionnera quand vous le mettrez dans le code.

Source

2009-01-23 15:25:06 Greg

Cela a fonctionné parfaitement. Merci beaucoup pour l'aide, très appréciée. – Jared

Problème de superposition en CSS

Répondre

Questions connexes