如何选择HTML / CSS中多个重叠的相邻图像的出现顺序？

Question

在CSS / HTML中故意重叠（和旋转）相邻图像时，例如

<div>
 {
   props.string
   ? <React.Fragment>test<br/></React.Fragment>
   : null
 }
</div>

如何确定图像出现顺序？

即有没有办法确保一排重叠图像中的特定图像保留在顶部？例如中间一个。 （请参阅所附示例）

我已经尝试使用一些相关文章中建议的“ z-index”（如上面的代码所示），但是我不确定是否正确使用了它（我对CSS还是比较陌生的。）

顺序似乎是一致的，但是是随机的。

编辑：问题标记为“为什么z-index不起作用？”的重复项。尽管答案是相同的，但我相信我的问题还是有细微差别。我并不是在问z-index为何不起作用，而是在如何选择重叠顺序。答案本质上是相同的，但是我相信这个问题可能会帮助那些还不知道搜索“ z-index”作为解决方案的人们。我将离开社区，以判断他们是否同意我的意见，如果不同意，请标记为撤职。

Answer 1

z-index属性仅适用于定位的元素。定位的元素的位置不是static（默认）。根据您的情况，将图像位置设置为相对。

img {
  position: relative;
}

<img src="http://lorempixel.com/200/100/?1" height= "30%" style="transform:rotate(20deg); z-index: 1"/>
<img src="http://lorempixel.com/200/100/?2" height= "30%" style="transform:rotate(5deg); margin-left:-30px; z-index: 2" />
<img src="http://lorempixel.com/200/100/?3" height= "30%" style="transform:rotate(-20deg); margin-left:-30px; z-index: 0"/>

Answer 2

要使z-index属性起作用，需要定位元素。如果您不需要破坏正常的布局流程，position: relative的效果很好。

我还将所有样式都移到了独立的CSS样式表中，建议不要使用内联样式。

img {
  height: 30%;
  width: auto;
  position: relative;
}

.img1 {
  transform:rotate(20deg);
  z-index: 1;
}

.img2 {
  transform:rotate(5deg);
  margin-left:-30px;
  z-index: 2;
}

.img3 {
  transform:rotate(-20deg);
  margin-left:-30px;
  z-index: 0;
}

<img class="img1" src="https://picsum.photos/200" />
<img class="img2" src="https://picsum.photos/220" />
<img class="img3" src="https://picsum.photos/210" />