SubjectX SubjectX - 6 months ago 9
HTML Question

Position image over image on two neighbour divs

I want to have a centered box with two images on each side of a box, overlapping. Later, I'll move top image for each box with jquery animate function away from bottom image.

This is my code so far:



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>





I have managed to center this box and add one picture for each side (left, right), but when I want to add another picture on either side, that has z-index: -1 it breaks into new line..

Fiddle that is showing problem: https://jsfiddle.net/bjgydLvo/

Answer

z-index wont work without assigning position..

Updated fiddle : https://jsfiddle.net/bjgydLvo/2/

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