Position Bild über Bild auf zwei Nachbar divs

Ich möchte eine zentrierte Box mit zwei Bildern auf jeder Seite einer Box haben, überlappend. Später verschiebe ich das obere Bild für jede Box mit jquery animate-Funktion weg vom unteren Bild.Position Bild über Bild auf zwei Nachbar divs

Dies ist mein Code so weit:

html, 
 
body, 
 
#wrapper { 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 
#wrapper { 
 
    align-items: center; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
#center { 
 
    width: 800px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    float: left; 
 
} 
 
#left { 
 
    //border:1px solid red; 
 
    width: 400px; 
 
    float: left; 
 
    //position:absolute; 
 

 
} 
 
#right { 
 
    //border: 1px solid green; 
 
    width: 400px; 
 
    float: right; 
 
    //position:absolute; 
 

 
} 
 
#top { 
 
    z-index: 1; 
 
} 
 
#under { 
 
    z-index: -1; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" href="css/style1.css"> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 
    <script type="text/javascript" src="js/script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <div id="center"> 
 
     <div id="left"> 
 
     <img src="http://s32.postimg.org/p5mgljj5x/drums_left.jpg" id="top"> 
 
     <img src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under"> 
 
     </div> 
 
     <div id="right"> 
 
     <!--<img src="http://s32.postimg.org/6ep4p4dz9/drums_right.jpg" id="under">--> 
 
     <img src="http://s32.postimg.org/mzs5r1fph/workout_right.jpg" id="top"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
<footer> 
 
</footer> 
 

 
</html>

ich es geschafft haben, diese Kontrolle zu bringen und ein Bild für jede Seite (links, rechts) hinzufügen, aber wenn ich möchte hinzufügen ein anderes Bild auf beiden Seiten, die z-Index hat: -1 in neue Zeilenumbrüche ..

Fiddle, das Problem zeigt: https://jsfiddle.net/bjgydLvo/

Quelle

2016-05-12 SubjectX

Sie müssen Ihrem zweiten Bild eine Klasse geben und es absolut positionieren.

<img class="second" src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under"> 

.second { 
    position: absolute; 
    top: 0; 
    z-index: 2; 
    left: 0; 
    width: 100%; 
}

Stellen Sie sicher zu Ihrem linken Element relative Position

#left { 
    width: 400px; 
    float: left; 
    position: relative; 
}

entfernen #under

Arbeitsbeispiel

https://jsfiddle.net/46pk1vdf/4/

Quelle

2016-05-12 10:12:43

Das funktionierte eigentlich auch, aber Antwort von user6028084 ist schneller. +1 sowieso! – SubjectX

Keine Sorgen :) Ich bin froh, dass ich helfen konnte –

Eigentlich habe ich das zweite Bild auf rechts div unkommentiert und alles bricht: D – SubjectX

Z-Index wird nicht ohne Position zuweisen arbeiten.

Aktualisiert Geige: https://jsfiddle.net/bjgydLvo/2/

#under{ 
    z-index:-1; 
    float: none; 
    height: auto; 
    left: 0; 
    position: absolute; 
    width: 400px; 
    z-index: -1; 
}

Quelle

2016-05-12 10:13:19 Sharon

Es scheint, dass Bilder unter sind jetzt alle unter dem linken Bild .. Das rechte Bild hat nichts darunter .. – SubjectX

Position Bild über Bild auf zwei Nachbar divs

Antwort

Verwandte Themen