HTML - 带过渡的 Z-index

Question

我的 html 元素有问题。当我对图像进行吸尘时，它会变大，但不会覆盖彼此相邻的图像。 (只剩一个)

https://i.imgur.com/oNP4gHA.png https://i.imgur.com/g2zIoSr.png

CSS:

.photo {

  margin: 10px 0;
  width: 120px;
  background: white;
  padding: 10px;
  opacity: 1;
  border-radius: 5px;
  border: 1px solid silver;
  box-sizing: border-box;
  justify-content: space-around;
  flex-wrap: wrap;
  transform: rotate(5deg);
  transition: 0.3s all ease-in-out;
  will-change: transform;
  align-items: flex-start;
  display: inline-flex;

}

.photo img {
  flex-basis: 100%;
  width: 100px;
}

.photo figcaption {
  margin-top: 10px;
}

.photo:nth-child(even) {
  transform: rotate(-5deg) scale(0.8);
}

.photo:hover {
  opacity: 1;
  transform: scale(2.0);
  z-index: 10;

}

HTML

{% for i in zdjecie %}

   <figure class="photo" >
    <img src="{{i.url}}"
         alt="Kotek Robert">
    <figcaption>
      {{i.title}}
    </figcaption>
  </figure>

{% endfor %}

Answer 1

z-index 不会在具有 static 定位的对象上按预期运行。

将 position: relative 添加到您的 .photo 元素以解决问题:

.photo {
  margin: 10px 0;
  width: 120px;
  background: white;
  padding: 10px;
  opacity: 1;
  border-radius: 5px;
  border: 1px solid silver;
  box-sizing: border-box;
  justify-content: space-around;
  flex-wrap: wrap;
  transform: rotate(5deg);
  transition: 0.3s all ease-in-out;
  will-change: transform;
  align-items: flex-start;
  display: inline-flex;
  
  position: relative; /* add this */
}

.photo img {
  flex-basis: 100%;
  width: 100px;
}

.photo figcaption {
  margin-top: 10px;
}

.photo:nth-child(even) {
  transform: rotate(-5deg) scale(0.8);
}

.photo:hover {
  opacity: 1;
  transform: scale(2.0);
  z-index: 10;
}

<figure class="photo">
  <img src="{{i.url}}" alt="Kotek Robert">
  <figcaption>
    {{i.title}}
  </figcaption>
</figure>

<figure class="photo">
  <img src="{{i.url}}" alt="Kotek Robert">
  <figcaption>
    {{i.title}}
  </figcaption>
</figure>

<figure class="photo">
  <img src="{{i.url}}" alt="Kotek Robert">
  <figcaption>
    {{i.title}}
  </figcaption>
</figure>

<figure class="photo">
  <img src="{{i.url}}" alt="Kotek Robert">
  <figcaption>
    {{i.title}}
  </figcaption>
</figure>

<figure class="photo">
  <img src="{{i.url}}" alt="Kotek Robert">
  <figcaption>
    {{i.title}}
  </figcaption>
</figure>

<figure class="photo">
  <img src="{{i.url}}" alt="Kotek Robert">
  <figcaption>
    {{i.title}}
  </figcaption>
</figure>

<figure class="photo">
  <img src="{{i.url}}" alt="Kotek Robert">
  <figcaption>
    {{i.title}}
  </figcaption>
</figure>

<figure class="photo">
  <img src="{{i.url}}" alt="Kotek Robert">
  <figcaption>
    {{i.title}}
  </figcaption>
</figure>

<figure class="photo">
  <img src="{{i.url}}" alt="Kotek Robert">
  <figcaption>
    {{i.title}}
  </figcaption>
</figure>

<figure class="photo">
  <img src="{{i.url}}" alt="Kotek Robert">
  <figcaption>
    {{i.title}}
  </figcaption>
</figure>