javascript - 旁边图片的 CSS 位置变化

标签 javascript jquery html css

所以，我有相同的图像，我需要相互重叠。如您所见，第一个的 z-index:1 和其他的为 0。但是，随着图像不断重复，我必须不断创建新样式以使下一个向右 115px。是否有 css 伪方法来自动执行此操作，还是我必须恢复使用 jquery 或 js 将其向右移动？

<style>
img.overlap{z-index:1;position:absolute;left:670px;}
img.underlap{z-index:0;position:absolute; left:785px;}
</style>

<div class="span12">
     <a href="#"><img src="img/blue_btn.png" alt="Home" class="overlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="About" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Services" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Portfolio" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Blog" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Contact" class="underlap"/></a>
</div>

更新:我在阅读这篇文章时裁剪了图片，因为我知道这很难想象。这是导航区域。我已经裁剪了第一个，我会重复它们，然后用 jquery 更改 alpha。

http://weslice.com/images/nav_complete.jpg

最佳答案

您应该尝试使用 float 和边距而不是绝对定位。

http://www.w3schools.com/css/css_float.asp

关于javascript - 旁边图片的 CSS 位置变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9201852/