HTML - 带过渡的 Z-index答案

【问题标题】：HTML - Z-index with transitionHTML - 带过渡的 Z-index
【发布时间】：2017-10-20 18:51:26
【问题描述】：

我的 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 %}

【问题讨论】：

标签： html css django figure

【解决方案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>

【讨论】：