0

I want 3 images on top of each other (so i can switch between them with the slider). I use the relative/absolute technique. Strangely, the result is floating outside the div (see the picture below). When I try to fix it with clearfix, it just cancel the superposition.

Any help ?

Here is a part of my css :

body {

img {
  width: 900px;
}

#parentsuperpose {
     position: relative;
}

img.superpose {
 position: absolute;
   top: 25px;
   left: 25px;
}

#img1 {
   z-index: 10;
}
#img2 {
 z-index: 11;
}
#img3 {
   z-index: 12;
}

Here is part of my HTML 

            <div class="row">
              <div class="col-md-12" id="parentsuperpose">
                  <img src="images/mur01.jpg" class="superpose" id="img1" alt="mur01" style="visibility:visible;">              
                  <img src="images/mur02.jpg" class="superpose" id="img2" alt="mur02" style="visibility:hidden;">
                  <img src="images/mur03.jpg" class="superpose" id="img3" alt="mur03" style="visibility:hidden;">
              </div>
            </div>

Here is the result :

enter image description here

fransua
  • 29
  • 1
  • 1
  • 10
  • One of the images should have `position:relative`, to make the parent expand. – tao May 01 '17 at 11:37
  • I tried what you said Andrei. It works, but the image with position:relative are not aligned anymore with the other. – fransua May 01 '17 at 12:18

0 Answers0