CSS定位-固定>相对>绝对

Question

但是，这可能是不明智的:是否有可能有一个fixed定位容器，其中有一些relative定位容器，并且它们本身包含一个元素堆栈，其中配置了一个absolute位置，以便能够使用z-index将它们放在另一个位置上？

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

My problem:不幸的是，不是有多个堆栈，而是只有一个堆栈。我的目标是让图像堆栈像在这张图片中一样在彼此之间浮动，而不是把所有的堆栈放在一起。我的目标是：

​

​

谢谢你的智慧！

Answer 1

这是因为您相对定位的.stack没有影响其内部的内容(即非绝对或固定位置的内容)以将其宽度和高度扩展到零以上。如果您将.stack-item (即10em)的宽度和高度直接应用于.stack，您将看到您的单个堆栈按预期分裂为多个堆栈。

Answer 2

这样做的方式是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索引创建照片堆栈：

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实例

和编码