CSS定位——固定>相对>绝对答案

【问题标题】：CSS positioning — fixed > relative > absoluteCSS定位——固定>相对>绝对
【发布时间】：2014-07-16 02:54:07
【问题描述】：

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

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

我的问题：不幸的是，我没有多个堆栈，而是只有一个堆栈。我的目标是让图像堆栈像这张图片一样彼此相邻浮动，而不是所有堆栈都位于彼此之上。我的目标：

感谢您的智慧！

【问题讨论】：

如果您将position:absolute; 更改为.stack-item？ jsfiddle.net/j08691/34kwp
您是否尝试过在 imgs 上使用绝对位置并使用 z-index？
谢谢，但这就是问题所在，如果我使用 position: absolute，堆栈不是相对于彼此定位，而是在彼此之上。（更新了jsfiddle和图片）
您是否尝试过为 .stack 指定宽度和高度？它们溢出了吗？

标签： css css-position

【解决方案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

【讨论】：

嘿！非常感谢您的提琴，但不幸的是，我的问题仍然存在：如果我将包装纸（和比萨饼……哈！）放入 100% 尺寸的固定定位容器中，内部布局会中断。 JSFiddle 更新：jsfiddle.net/M5Ebx/6
谢谢！您的答案和上面的答案结合起来帮助解决了我的问题！谢谢！

【解决方案2】：

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

【讨论】：

谢谢！您的回答和下面的回答结合起来帮助解决了我的问题！谢谢！