z-インデックスと<a href>

Question

私は、Zインデックスを使って水平に積み重ねる5つのユーザー画像のシーケンスを持っています。すなわち<img src="xxxx" style="z-index:5;position:relative;">、次にz-インデックス4 ... 3。

これらの画像をユーザーの「プロフィール」にリンクする必要があります。 <img>を<a>で囲むと、書式が壊れます。それは、重なり合う代わりに（z-インデックスが正しい（！））線で画像を表示するだけです。私はちょうど<a href="xx"><img></a>とまた<a href="xx" style="position:relative"><img></a>を試しましたが、何も働いていません。

<?php $count = 5; ?> 
<?php foreach($today_all_result as $today_all_results) : ?>   
    <a href="<?php echo BASE_URI; ?>/user/?user=<?php echo $today_all_results->user_id; ?>" style="position:relative;z-index:<?php echo $count; ?>"> 
     <img src='<?php echo BASE_URI; ?>/images/userImages/<?php echo $today_all_results->userPicture; ?>' class="pic-athlete <?php echo $stacked; ?>" style="z-index:<?php echo $count; ?>;position:relative;"> 
     </a> 
     <?php $count--; ?> 
     <?php $stacked = "stacked"; ?> 
     <?php if($count <= 0) break; ?> 
    <?php endforeach; ?> 

誰でもこれを修正する方法を知っていますか？前もって感謝します！

Answer 1

変更position: relative;からposition: absolute;

img{ 
 
    height: 100px; 
 
    width: 100px; 
 
    position: absolute; 
 
}

<a href="ddd"><img src="" style="background-color: blue; z-index: 10;"/></a> 
 
<a href="ddd"><img src="" style="background-color: green; z-index: 2;"/></a> 
 
<a href="ddd"><img src="" style="background-color: red; z-index: 3;"/></a>

別の例にスタイル：

img{ 
 
    height: 100px; 
 
    width: 100px; 
 
    position: absolute; 
 
}

<a href="ddd"><img src="" style="background-color: blue; z-index: 1;"/></a> 
 
<a href="ddd"><img src="" style="background-color: green; z-index: 2; left: 20px; top: 20px;"/></a> 
 
<a href="ddd"><img src="" style="background-color: red; z-index: 3;left: 40px; top: 40px;"/></a>