Javascript CSS在它旁边的图像上的位置更改

所以，我有相同的图像，我需要彼此重叠。如您所见，第一个具有z索引：1，其他为0。但是，随着图像不断重复，我必须不断创建新样式，使下一个样式向右移动115像素。是否有一个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>

重叠{z-索引：1；位置：绝对；左：670px；}
img.underlap{z-索引：0；位置：绝对；左：785px；}

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

---

您应该尝试使用浮动和边距，而不是绝对定位

---

您应该尝试使用浮动和边距，而不是绝对定位

---

由于您正试图完成重叠，浮动可能不起作用。我建议您使用CSS同级选择器，并专门为“img”、“img+img”、“img+img+img”等编写规则，这些规则会逐渐增加。我认为这应该是唯一的纯CSS方式。使用JavaScript实现这一点很容易。

因为您试图实现重叠，所以浮动可能不起作用。我建议您使用CSS同级选择器，并专门为“img”、“img+img”、“img+img+img”等编写规则，这些规则会逐渐增加。我认为这应该是唯一的纯CSS方式。使用JavaScript实现这一点很容易。

使用

显示：内联块

让元素彼此相邻，然后使用

边距：-*px

重叠元素：

.span12 a {
    display : inline-block;
    margin  : 0 0 0 -20px;/*this margin is responsible for the overlap between elements*/
    
    /*IE 6&7 Compatibility*/
    *display : inline;/*only read by IE7*/
    zoom     : 1;/*give the element the `hasLayout` property since you can't give it to an element directly*/
    _height  : 50px;/*only read by IE6, but is necessary to specify a height for IE6*/
}

下面是一个演示：

更新 要从左到右而不是从右到左堆叠元素，请执行以下操作：

.span12 a {
    float  : right;
    margin : 0 -10px 0 0;/*this margin is responsible for the overlap between elements*/
}

---

下面是一个演示：

如何使用

显示：内联块

使元素彼此相邻，然后使用

边距：-*px

重叠元素：

.span12 a {
    display : inline-block;
    margin  : 0 0 0 -20px;/*this margin is responsible for the overlap between elements*/
    
    /*IE 6&7 Compatibility*/
    *display : inline;/*only read by IE7*/
    zoom     : 1;/*give the element the `hasLayout` property since you can't give it to an element directly*/
    _height  : 50px;/*only read by IE6, but is necessary to specify a height for IE6*/
}

下面是一个演示：

更新 要从左到右而不是从右到左堆叠元素，请执行以下操作：

.span12 a {
    float  : right;
    margin : 0 -10px 0 0;/*this margin is responsible for the overlap between elements*/
}

这里是一个演示：

我认为这个提琴不需要类就可以达到效果（虽然它确实颠倒了html中菜单的顺序，但并不是在普通用户面前显示的顺序）。在查看示例图像后，您可能不希望看到我的示例中的“悬停”效果，但可以删除它

CSS

HTML

我认为这种提琴不需要类就能达到效果（尽管它确实在html中颠倒了菜单的顺序，但在普通用户面前却没有）。在查看示例图像后，您可能不希望看到我的示例中的“悬停”效果，但可以删除它

CSS

HTML

现在确定你在这里的意思。你能贴张图表吗？我不明白这个的目的？你能在JSFIDLE上发布一个例子吗？现在确定你在这里的意思。你能贴张图表吗？我不明白这个的目的？您可以在JSFIDLE上发布一个示例吗？请记住，9之前的Internet Explorer版本并不完全支持同级选择器。重叠使它变得更加困难，但仍然可以使用容器使用CSS和float完成，并将内容绝对定位在重叠元素中。@RyanP相邻的同级选择器（

++

）在IE 7+中可用：@Jasper I说“完全支持”。在IE7中，同级选择器在页面加载时工作，但不适用于加载后的更改。在IE8中，元素直到焦点改变才更新。IE9完全支持同级选择器。@RyanP在IE7或IE8中查看此测试页时，我看不到这些问题：。我想知道确实存在的任何问题，那么我是否看错了？请记住，9之前的Internet Explorer版本不完全支持兄弟选择器。重叠使它变得更加困难，但仍然可以使用容器使用CSS和float完成，并将内容绝对定位在重叠元素中。@RyanP相邻的同级选择器（

++

）在IE 7+中可用：@Jasper I说“完全支持”。在IE7中，同级选择器在页面加载时工作，但不适用于加载后的更改。在IE8中，元素直到焦点改变才更新。IE9完全支持同级选择器。@RyanP在IE7或IE8中查看此测试页时，我看不到这些问题：。我想知道确实存在的任何问题，所以我看得不对吗？嗨，Ryan，谢谢你的回答，不幸的是，float在这里不起作用，因为我试图重叠上一张图片。我已经发布了一个示例图像，这样我们都可以了解下一次设计师创建疯狂模型时我们可以使用什么css技术请尽量避免链接到学校。解释为什么在这个短空间中比我做得更好嗨，Ryan，谢谢你的回答，不幸的是，float在这里不起作用，因为我试图重叠上一张图片。我已经发布了一个示例图像，这样我们都可以了解下一次设计师创建疯狂模型时我们可以使用什么css技术请尽量避免链接到学校。解释为什么在这么短的空间中比我做得更好这没有让图像从左到右（左在顶部）重叠，而是从右到左重叠。@ScottS这是一个很好的观点，请参阅更新的JSFIDLE，它使用

float:right

从左到右堆叠：这似乎是解决方案，但是，元素左侧有一个巨大的间隙

float:right

是我在解决方案中使用的：-）。只需对源html重新排序以使其正常工作，就可以得到我的解决方案。@MIguel将容器元素的宽度设置为子元素的组合宽度减去每次的元素数