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>