Question

I have a sequence of 5 user images that I am stacking horizontally using a z-index. i.e: <img src="xxxx" style="z-index:5;position:relative;"> and then z-index 4...3..etc.

I now want to link these images to the user's 'profile'. If I surround my <img> with an <a> it breaks the formatting. It just shows the images in a line (with the z-indexes still correct(!?)) instead of overlapped. I tried just <a href="xx"><img></a> and also <a href="xx" style="position:relative"><img></a> but nothing has worked.

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

Does anyone know how to fix this? Thank you in advance!

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>

z-index和<a href="">

1 个答案: