如何保持绝对定位图像之后的内容流？

Question

奇怪的是，当我搜索这个问题时，我什么也找不到。

我有一堆图片堆叠在一起(不是垂直的)，使用position: absolute。

所以HTML基本上如下所示：

<div class="image-gallery">
  <img src="whatever.jpg">
  <img src="whatever2.jpg" class="hidden">
  <img src="whatever3.jpg" class="hidden">
</div>

而CSS则使它们既堆栈又响应，但保持其纵横比：

.image-gallery {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
}

.image-gallery img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

这一切都很好，但问题是这个画廊后面的内容。它就在上面，因为就HTML而言，图像不会占用任何空间。

是否有一个简单的CSS修复以保留内容流，或者我是否必须使用height调整大小函数将包含的div的width设置为width的一部分？

JSFiddle这里： http://jsfiddle.net/01xoet16/

Answer 1

除了Quentin给出的很好的解释之外，我还提出了一个解决办法。所以看起来你可以把其中一幅图像保留下来，所以空间总是保留下来的，如果有必要的话，还可以和z-index玩。

只有当所有图像大小相同时，该解决方案才能工作。

http://jsfiddle.net/01xoet16/3/

.image-gallery img {
    width: 100%;
    height: auto;
}
.image-gallery img.hidden {
    position: absolute;
    left: 0;
    top: 0;
}

使用z-index的额外控制。

http://jsfiddle.net/01xoet16/4/

.image-gallery img:not(.hidden) {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.image-gallery img.hidden {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

Answer 2

是否有简单的CSS修复以保留内容流？

不是的。绝对定位从正常流中删除内容。这样的内容不能影响其他(非后代)元素的位置。

还是必须使用JavaScript调整大小函数将包含div的高度设置为宽度的一小部分？

这或知道你的图像将是什么维度在第一。

或者，考虑通过切换图像的display属性来隐藏它们(这会使它们在可见时处于正常流中)，而不是绝对地定位它们。