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>

그러나 이 방법은 접할 수 있는 이미지 수가 다양하기 때문에 실용적이지 않습니다.

해결책:

Flexbox를 활용하고 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!