CSS定位 - 修复＆gt;相对＆gt;绝对

Question

可能这是noobish，但是：是否可以有一个fixed定位容器，其中包含一些relative个定位容器，它们本身包含一堆排列有absolute的元素能够使用z-index将它们叠加在一起的位置？

http://jsfiddle.net/A82b2/14/

我的问题：不幸的是，我没有多个堆栈，最终只有一个堆栈。 我的目标是让图像堆栈像这张图片一样漂浮在彼此旁边，而不是所有堆叠在彼此之上。我的目标：

感谢您的智慧！

Answer 1

您的方式是position:absolute;和z-index。要解决堆栈在彼此之上的问题，请将堆栈包装在div中：

<div class="wrap">
<img class="one" src="http://lorempizza.com/500/500">
<img class="two" src="http://lorempizza.com/500/500">
<img class="three" src="http://lorempizza.com/500/500">
</div>

并像这样给它CSS：

.wrap{
    position:relative;
    float:left;
    display:block;
    width:600px;
    height:600px;
}

然后你需要使用绝对定位和z-index来创建照片堆栈：

img{
    position:absolute;
    }
.one{
    top:50px;
    left:50px;
    z-index:3;
}
.two{
    top:60px;
    left:60px;
    z-index:2;
}
.three{
    top:70px;
    left:70px;
    z-index:1;

}

JSFiddle Example
And Coding

Answer 2

之所以发生这种情况，是因为相对定位的.stack内部没有影响流量的内容（即非绝对或固定位置的内容），无法将其宽度和高度扩展到零以上。如果您将.stack-item（即10em）的宽度和高度直接应用到.stack，您会看到您的单个堆栈按预期分成多个堆栈。