2016-08-08 11 views
0

Guten Tag, ich weiß, dass mein Titel chaotisch ist, aber ich habe versucht, für ungefähr 2 Stunden eine Antwort zu finden.Anzeigen zu divs vor Bild in div

<div id="lightbox"> 
    <img src="blabla.png"> 
    <div href="#" id="next" onClick="next(1)"></div> 
    <div href="#" id="prev" onClick="prev(1)"></div> 
</div> 

Auch #lightbox ist z-indiziert. Kann ich die nächsten und vorherigen Divs vor diesem Bild erscheinen lassen?

Antwort

0

#next und #prev müssen eine z-index haben, vorausgesetzt, sie sind absolut positioniert. Wenn das Bild auch eine absolute oder relative Positionierung hat, müssen z-index von #next und #prev höher sein als das Bild z-index.

Wenn #lightbox eine absolute Positionierung hat, dann benötigen Sie einen Container für alle Elemente, die eine relative Positionierung haben.

+0

Können Sie bitte genauer mit diesem Container sein. Ich weiß nicht, wovon du sprichst. Aber ich habe z-Index höher auf der vorherigen und nächsten als auf Bild –

+0

Alles, was eine absolute Position hat, muss ein Elternteil, dass es relativ ist. Wenn nicht angegeben, wird es relativ zu 'Körper' sein. Wenn Sie Ihre Tasten positionieren möchten, müssen sie relativ zu etwas sein. Wenn Sie Ihr CSS auch posten, kann ich Ihnen genauer erklären, wie Sie es beheben können. Oder besser noch, kreiere eine Geige. –

+0

#lightBox { \t Position: absolut; \t Überlauf: versteckt; \t Anzeige: keine; \t Z-Index: 999; \t oben: 50%; links: 50%; \t transform: übersetzen (-50%, -50%); } #next { \t Z-Index: 900; \t Position: relativ; \t Höhe: 100%; \t Breite: 25%; \t Hintergrundfarbe: blau; \t float: rechts; \t Anzeige: keine; } #prev { \t z-index: 900; \t Position: relativ; \t Höhe: 100%; \t Breite: 25%; \t Schwimmer: links; \t Hintergrundfarbe: rot; \t Anzeige: keine; } img # lb { Höhe: 450px; Position: relativ; Z-Index: 10; } –