Question 43331 in Html Question posted in
Some basic documentation can be found here.

problem with z-index with positioned tags – Html

I can’t figure out why the z-index set to different element doesn’t work as expected.

Is there someone that could explain me why the img with CC class is overlying the other two, even if it has a lower z-index?

Looking to the theory, the positioned object should have to work with z-index, but in this case they don’t; I tried to chenge the integers of the z-.indexes, and also I added the display: block to them, but they still not follow the supposed rules.

.slideshow {
  opacity: 1;
  /* overflow: hidden; */
  width: var(--width);
  height: 80%;
  margin: 2vh auto;
  /* margin: 4vh auto; */
}

.slideshow__inner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.slideshow__inner:not(.slideshow__inner--back, .slideshow__inner--front) {
  transform: scale(.95);
}

.slideshow__inner img {
  display: block;
  width: 70%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0.1px);
}

.slideshow__inner img.AA {
  z-index: 4;
}

.slideshow__inner img.BB {
  top: 15%;
  z-index: 3;
  left: 15%;
}

.slideshow__inner img.CC {
  top: 30%;
  left: 30%;
  z-index: 2;
}
<div class="slideshow">
  <div class="slideshow__inner">
    <img class="AA" src='https://cdn.pixabay.com/photo/2022/05/03/04/34/marseille-7170837_960_720.jpg'></img>
  </div>
  <div class="slideshow__inner">
    <img class="BB" src='https://cdn.pixabay.com/photo/2016/01/04/06/26/wadi-rum-1120371_960_720.jpg'></img>
  </div>
  <div class="slideshow__inner active">
    <img class="CC" src='https://cdn.pixabay.com/photo/2022/04/21/20/49/road-7148369_960_720.jpg'></img>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

    from https://www.w3schools.com/cssref/pr_pos_z-index.php

    So you need to set the position css attribute to your image classes. I would try position: relative in your case.

    Login or Signup to reply.
  2. 0

    I have made an example here to test https://jsfiddle.net/lharby/0oh4rpeq/

    I have removed the closing tags as per the comment. I have also added absolute urls for each image.

    And added opacity 0.5 to the images, I think this is doing what your css is suggesting.

    CSS is identical but I added this:

    img  {
    opacity: 0.5;
}

    .slideshow {
  opacity: 1;
  /* overflow: hidden; */
  width: var(--width);
  height: 80%;
  margin: 2vh auto;
  /* margin: 4vh auto; */
}

.slideshow__inner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.slideshow__inner:not(.slideshow__inner--back, .slideshow__inner--front) {
  transform: scale(.95);
}

.slideshow__inner img {
  display: block;
  width: 70%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0.1px);
}

.slideshow__inner img.AA {
  z-index: 4;
}

.slideshow__inner img.BB {
  top: 15%;
  z-index: 3;
  left: 15%;
}

.slideshow__inner img.CC {
  top: 30%;
  left: 30%;
  z-index: 2;
}

img  {
    opacity: 0.5;
}
    <div class="slideshow">
  <div class="slideshow__inner">
    <img class="AA" src='https://dummyimage.com/600x425'>
  </div>
  <div class="slideshow__inner">
    <img class="BB" src='https://dummyimage.com/500x325'>
  </div>
  <div class="slideshow__inner active">
    <img class="CC" src='https://dummyimage.com/200x325'>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search