Z インデックスを操作せずに複数のインライン イメージを効率的にオーバーラップするにはどうすればよいですか?

複数のインライン画像のオーバーラップ

次のような一連の画像をオーバーレイして表示することを目的としています:

現在のコード:

<code class="css">.avatar img {
    border-radius: 50%;
    position: relative;
    left: -5px;
    z-index: 1;
}</code>

<code class="html"><div class="avatars">
    <span class="avatar">
        <img src="https://picsum.photos/70" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/50" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/20" width="25" height="25"/>
    </span>
    <span class="avatar">
        <img src="https://picsum.photos/100" width="25" height="25"/>
    </span>
    <!-- Variable amount more avatars -->
</div>
<p>4 People</p></code>

ただし、この方法は、遭遇する可能性のある画像の数が変化するため、現実的ではありません。

解決策:

フレックスボックスを使用して、 Z インデックス操作の必要性を排除する順序:

<code class="css">.avatars {
  display: inline-flex;
  flex-direction: row-reverse;
}

.avatar {
  position: relative;
  border: 4px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:last-child) {
  margin-left: -60px;
}

.avatar img {
  width: 100%;
  display: block;
}</code>

<code class="html"><div class="avatars">
  <span class="avatar">
        <img src="https://picsum.photos/70">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/80">
    </span>
  <span class="avatar">
        <img src="https://picsum.photos/90">
    </span>
  <span class="avatar">
       <img src="https://picsum.photos/100">
    </span>
</div></code>

このソリューションは、画像を柔軟に位置合わせし、画像数に関係なく適切な配置を保証します。

以上がZ インデックスを操作せずに複数のインライン イメージを効率的にオーバーラップするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。