Je veux un elemenet diving toggling, pour chevaucher le contenu sous-jacent avec z-index. Comment puis-je atteindre cet objectif?

J'ai un court texte d'introduction à l'intérieur d'une boîte, si l'utilisateur veut lire plus loin, il peut basculer un élément div caché qui montre le reste du contenu. Sous cette intro box j'ai un autre élément, que je veux toujours rester dans cette position. Je veux que le texte basculé affiche le contenu fixe, et je ne veux pas le pousser vers le bas lorsque le div basculé est ouvert. J'ai expérimenté avec diverses valeurs d'index z, positionnement absolu et relatif, en vain. Existe-t-il une solution propre basée sur CSS? S'il vous plaît aider! Voici une démonstration de ce que je suis en train de faire:Je veux un elemenet diving toggling, pour chevaucher le contenu sous-jacent avec z-index. Comment puis-je atteindre cet objectif?

> <!DOCTYPE html PUBLIC "-//W3C//DTD 
> XHTML 1.0 Transitional//EN" 
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
> <html 
> xmlns="http://www.w3.org/1999/xhtml" 
> xml:lang="en"> <head>  <style 
> type="text/css">  .container{width: 
> 400px; 
>     height: 500px; 
>     border: 1px dashed #999; 
>     }  div.container{padding:0; margin:0}     #morecontent{ 
>    z-index: 100  
>    }  #morecontent,.introcontent{background: #DFFAFF;}    div#fixedcontent{background: 
> #FFDFDF; 
>      z-index: -1; 
>      position: absolute; 
>      width: 400px 
>      }   </style> <title>Toggle overlap - test</title> </head> <body> 
> <div class="container">   <div id=""> 
>  <script type="text/javascript"> 
>        function toggle(obj){ 
>        var el=document.getElementById('morecontent'); 
>         if (el.style.display !='none'){ 
>           el.style.display='none'; 
>          } 
>          else {el.style.display=''; 
>            } 
>        } 
>         </script> 
>    <p class="introcontent">Lorem ipsum dolor sit amet, consectetur 
> adipiscing elit. Aenean in pede congue 
> ipsum sollicitudin pellentesque. Nunc 
> t tortor dolor, sagittis nec, placerat 
> vel, commodo sed, nunc. Vivamus 
> bibendum molestie orci. Duis nec leo 
> at libero fermentum molestie. Nam eu 
> risus.<br /> 
>    There's more if you press toggle... 
>    
>           </p> 
>      <a href="JavaScript: toggle(this)">Toggle</a>     
>     <div id="morecontent" style="display:none;"> 
>      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in 
> pede congue ipsum sollicitudin 
> pellentesque. Nunc t tortor dolor, 
> sagittis nec, placerat vel, commodo 
> sed, nunc. Vivamus bibendum molestie 
> orci. Duis nec leo at libero fermentum 
> molestie. Nam eu risus. 
>           </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
> Aenean in pede congue ipsum 
> sollicitudin pellentesque. Nunc 
> t tortor dolor, sagittis nec, placerat 
> vel, commodo sed, nunc. Vivamus 
> bibendum molestie orci. Duis nec leo 
> at libero fermentum molestie. Nam eu 
> risus. 
>           </p> 
>      </div> 
>      
>      <div id="fixedcontent"> 
>      <p>This should stay 'under' the toggled content!</p> 
>       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in 
> pede congue ipsum sollicitudin 
> pellentesque. Nunc t tortor dolor, 
> sagittis nec, placerat vel, commodo 
> sed, nunc. Vivamus bibendum molestie 
> orci. Duis nec leo at libero fermentum 
> molestie. Nam eu risus. 
>           </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
> Aenean in pede congue ipsum 
> sollicitudin pellentesque. Nunc 
> t tortor dolor, sagittis nec, placerat 
> vel, commodo sed, nunc. Vivamus 
> bibendum molestie orci. Duis nec leo 
> at libero fermentum molestie. Nam eu 
> risus. 
>           </p> 
>       </div>    </div>   </div>  </body> </html>

Source

2009-04-14 Tamas Kalman

Veuillez nettoyer et formater votre code source si vous voulez que nous le regardions. –

Oui - peut-être une version dépouillée contenant uniquement les éléments avec lesquels vous rencontrez des problèmes – wheresrhys

Quelque chose que je l'ai fait dans le passé:

séparer votre contenu en deux travées. Une travée est affichée et l'autre cachée. Lorsque l'utilisateur souhaite voir le reste du contenu, affichez l'autre plage avec le reste du texte. J'utilise la commande JQuery toggle() pour faciliter la tâche.

Source

2009-04-14 21:00:46

Je suppose que vous testez avec IE uniquement. Firefox n'a pas ce problème.

Ceci est un bug connu dans IE, le bug z-index

Is z-index the only way to force an element to be positioned over top of another, if not what other methods are there?

Il y a une solution "générale" en utilisant javascript http://mahzeh.org/?p=23

Mais la meilleure façon est de réorganiser les éléments de façon votre élément extensible se place au-dessus de la boîte ci-dessous. Essayez de l'insérer après la boîte que vous voulez couvrir dans votre HTML et ensuite positionnez-le visuellement en utilisant le positionnement absolu.

Source

2009-04-14 21:07:19 Miquel

Non au contraire - J'ai seulement testé avec FireFox! Mais la deuxième partie de votre réponse a résolu le problème. Je viens de mettre le contenu fixe avant le contenu de basculement dans le balisage, le positionner en absolu, et ça marche! Merci beaucoup. :) PS .: Je suis nouveau sur le site alors peut-être que ma question n'a pas été inventée. –

Vous devriez marquer ma réponse comme une solution alors;) – Miquel

Essayez:

#container { position: relative; } 
#more { position: absolute; display: none; background-color: White;} 

<div id="container"> 
    Lorum <a href="#">click for more</a> 
    <div id="more"> 
     Lorum 
    </div> 
    <div id="under"> 
     Underneath text 
    </div> 
</div>

Lors de l'événement 'click for more' set #more-display: block;

Le z-index est impliqué dans ce cas comme #more est avant #under dans l'arborescence du document, et a donc une plus z-index

Source

2009-05-09 16:07:00 EoghanM

Je ne vois pas comment le déplacement de l'index z autour est meilleur/plus efficace que le masquage et l'affichage du contenu en modifiant l'affichage attribut sur les divs. Y at-il une raison pour laquelle vous voulez tout le contenu de la page à tout moment?

Source

2009-05-09 16:12:43

Je veux un elemenet diving toggling, pour chevaucher le contenu sous-jacent avec z-index. Comment puis-je atteindre cet objectif?

Répondre

Questions connexes