Bagaimana untuk Bertindih Berbilang Imej Sebaris dengan Cekap Tanpa Manipulasi Indeks Z?

Bertindih Berbilang Imej Sebaris

Anda berhasrat untuk membentangkan satu set imej yang ditindih serupa dengan yang berikut:

Kod semasa anda:

.avatar img { border-radius: 50%; position: relative; left: -5px; z-index: 1; }<pre class="brush:php;toolbar:false">&lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;avatars&quot;&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/70&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/50&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/20&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;span class=&quot;avatar&quot;&gt; &lt;img src=&quot;https://picsum.photos/100&quot; width=&quot;25&quot; height=&quot;25&quot;/&gt; &lt;/span&gt; &lt;!-- Variable amount more avatars --&gt; &lt;/div&gt; &lt;p&gt;4 People&lt;/p&gt;&lt;/code&gt;</pre> <p></p>Penyelesaian ini menjajarkan imej secara fleksibel, memastikan susunan yang betul tanpa mengira kiraan imej.<p></p>

Atas ialah kandungan terperinci Bagaimana untuk Bertindih Berbilang Imej Sebaris dengan Cekap Tanpa Manipulasi Indeks Z?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!