css怎么排列可以让元素自动层叠

当图片较少的时候,在一个div中排版如下(正常情况):
图片描述

当图片较多的时候,在一个div中排列的时候,怎么做到如下(后面的图片自动覆盖前面的图片):
图片描述

只用css构建能实现不?

阅读 3.7k
4 个回答

反对 @CRIMX 的答案

所谓的「覆盖」只是视觉上展示的效果,而不是布局中真实的覆盖,所以并不一定必须脱离文档流进行层叠,更何况不脱离文档流简单使用 relative position 也可以实现覆盖。

这个问题中的布局要求如果使用 Flex 的话可以比较方便的解决,详细的实现直接上 DEMO:
https://codepen.io/cool_zjy/p...

能覆盖说明脱离了文档流,排除 float ,absolute 定位可以,按百分比分配 left,但百分比得按个数计算。

如果个数固定的可以用 Sass 等生成,动态用 JS 计算。

补:

@cool_zjy 的 workaround 思路很不错,值得参考。

如果需要半透明的话可以参考回这个方法,也写了个小 Demo。

https://codepen.io/straybugs/...

利用css的z-index 属性:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。然后调整每个元素的位置就行了。

如果每个图片都是一样大小的话,可以试试用margin-left: -20px;这种方法

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题