2016-09-02 26 views
-1

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

これらの画像をユーザーの「プロフィール」にリンクする必要があります。 <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; ?> 

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

+0

位置'a'要素であり、' img'要素ではありません。 – zzzzBov

+5

こんにちは、jsFiddleやいくつかのコードを追加してください。 – MoolsBytheway

+0

@zzzzBovが言ったことに追加すると、a要素に位置を追加する 'a's – henry

答えて

0

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

+0

これを行うと、お互いの下にあるすべての画像が非表示になります –

+0

これはあなたが求めているものです:「単に重なっているのではなく、ラインで画像を表示します。部分的にオーバーラップさせたい場合は、各画像に 'left'属性と' top'属性を追加してください。 –

+0

何らかの理由で、これは私にそれらのすべてではなく1つのイメージを表示します。それらが互いに部分的にではなく100%で重複しているようなものです。 –