Question

所以，我有相同的图像，我需要相互重叠。你可以看到的第一个有一个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

Answer 1

你应该尝试使用float和margin而不是绝对定位。

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

Answer 2

如何使用display : inline-block让您的元素彼此相邻，然后使用margin : -*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*/
}

以下是演示：http://jsfiddle.net/WJKS5/2/

更新

要从左到右而不是从右到左堆叠元素：

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

以下是演示：http://jsfiddle.net/WJKS5/4/

Answer 3

我认为这个小提琴http://jsfiddle.net/2vUzp/9/在不需要类的情况下实现了效果（尽管它确实颠倒了html中菜单的顺序，但没有显示给普通用户显示的内容）。查看您的示例图像后，您可能不希望我的示例中出现“悬停”效果，但可以将其删除。

CSS

.span12 {
    float: left;
}

.span12 a {
    position: relative;
    margin-right: -30px;
    display: block;
    float: right;
}

.span12 a:first-child {
    margin-right: 0;
}

.span12 a:hover {
    z-index: 1;
}

.span12 img { /*for demo*/
    display: block;
    width: 100px;
    height: 20px;
    border: 1px solid blue;
    background-color: cyan;
}

HTML

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

Answer 4

由于您正在尝试完成重叠，因此浮动可能无法正常工作。我建议你使用CSS兄弟选择器并专门为'img'，'img + img'，'img + img + img'等编写规则，这些规则会逐渐增加。我认为这应该是围绕它的唯一纯CSS方式。使用JavaScript执行此操作将是轻而易举的事。

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

4 个答案:

更新