How to Efficiently Overlap Multiple Inline Images Without Z-Index Manipulation?-CSS Tutorial-php.cn

How to Efficiently Overlap Multiple Inline Images Without Z-Index Manipulation?

Susan Sarandon

Release： 2024-10-24 18:45:02

Original

308 people have browsed it

Overlapping Multiple Inline Images

You aim to present a set of images overlaid akin to the following:

How to Efficiently Overlap Multiple Inline Images Without Z-Index Manipulation?

Your current code:

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

Copy after login

<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>

Copy after login

However, this method becomes impractical due to the variable number of images you may encounter.

Solution:

Utilize flexbox and reverse the ordering to eliminate the need for z-index manipulation:

<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>

Copy after login

<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>

Copy after login

This solution aligns the images flexibly, ensuring proper arrangement regardless of the image count.

The above is the detailed content of How to Efficiently Overlap Multiple Inline Images Without Z-Index Manipulation?. For more information, please follow other related articles on the PHP Chinese website!