Ich möchte ein toggeln div elemenet, den darunterliegenden Inhalt mit Z-Index zu überlappen. Wie kann ich das erreichen?

Ich habe einen kurzen Intro-Text in einer Box, wenn der Benutzer mehr lesen möchte, kann er ein verstecktes div-Element umschalten, das den Rest des Inhalts anzeigt. Unter dieser Intro-Box habe ich ein anderes Element, das ich immer in dieser Position behalten möchte. Ich möchte, dass der umzuschaltende Text den festen Inhalt "zeigt", und ich möchte nicht, dass er nach unten gedrückt wird, wenn das umgeschaltete div geöffnet wird. Ich habe experimentiert mit verschiedenen Z-Index-Werten, absolute und relative Positionierung, vergeblich. Gibt es eine saubere CSS-basierte Lösung? Bitte helfen Sie! Hier ist eine Demo von dem, was ich versuche zu tun:Ich möchte ein toggeln div elemenet, den darunterliegenden Inhalt mit Z-Index zu überlappen. Wie kann ich das erreichen?

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

Quelle

2009-04-14 Tamas Kalman

Bitte bereinigen und formatieren Sie Ihren Quellcode, wenn Sie möchten, dass wir ihn betrachten. –

Yep - vielleicht eine abgespeckte Version, die nur die Elemente enthält, mit denen du Probleme hast – wheresrhys

Etwas, das ich in der Vergangenheit getan haben:

Separate Ihre Inhalte in zwei Spannweiten. Ein Bereich wird angezeigt und der andere ausgeblendet. Wenn der Benutzer den Rest des Inhalts sehen möchte, zeigen Sie den anderen Bereich mit dem restlichen Text an.

Ich benutze den JQuery toggle() Befehl, um es einfacher zu machen.

Quelle

2009-04-14 21:00:46

Ich denke, Sie testen nur mit IE. Firefox hat dieses Problem nicht.

Dies ist ein bekannter Fehler im IE, die z-index bug

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

Es gibt eine "allgemeine" Lösung mit Hilfe von Javascript http://mahzeh.org/?p=23

Aber der beste Weg ist, die Elemente so neu zu ordnen Ihr erweiterbares Element wird auf einer Position über der darunter liegenden Box positioniert. Versuchen Sie, es nach der Box einzufügen, die Sie in Ihrem HTML-Code abdecken möchten, und positionieren Sie es dann über die absolute Positionierung.

Quelle

2009-04-14 21:07:19 Miquel

Nein, im Gegenteil - ich habe nur mit FireFox getestet! Aber der zweite Teil Ihrer Antwort hat das Problem gelöst. Ich musste einfach den fixierten Inhalt vor dem Wechsel des Inhalts in das Markup setzen, es absolut positionieren und es funktionierte! Vielen Dank. :) PS .: Ich bin neu auf der Website, vielleicht war meine Frage nicht am besten geprägt. –

Du solltest meine Antwort dann als Lösung markieren;) – Miquel

Versuchen:

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

Auf Ereignis 'click for more' gesetzt #more-display: block;

Der Z-Index ist in diesem Fall implizit als #more vor #under im Dokumentenbaum ist, und hat daher eine höhere z-index

Quelle

2009-05-09 16:07:00 EoghanM

Ich sehe nicht, wie das Verschieben des Z-Index um besser/effizienter ist als das Verbergen und Anzeigen des Inhalts durch Ändern der Anzeige Attribut auf den Divs. Gibt es einen Grund, warum Sie den gesamten Inhalt der Seite jederzeit möchten?

Quelle

2009-05-09 16:12:43

Ich möchte ein toggeln div elemenet, den darunterliegenden Inhalt mit Z-Index zu überlappen. Wie kann ich das erreichen?

Antwort

Verwandte Themen