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>