在表中重叠单元格，如书中的页面

我正在尝试制作一系列用户可以填写的表单，并添加尽可能多的表单。 这些forms的高度会有所不同（稍后重要），可以最小化。 现在我把它们放在一个桌子上，周围是一个带溢出自动的固定位置div。 他们在桌子上的原因是我可以将它们粘在页面底部，无论高度如何。 我想要的是表格单元格像书中的页面一样，我希望创建的每个新表单都与前一个单元格相邻，直到没有更多的空间。 当页面的宽度已经填充时，我希望它们开始重叠，以便均匀地分隔它们。 此外，当单击一个表单时，它将被带到前面。 下面是一张粗略的图纸和我到目前为止的一个例子。

这是我的头脑中的胡言乱语，所以如果你发现任何令人困惑的请问。

问题：我想要的是表格单元格与书中的页面类似，我希望创建的每个新表单都与前一个表单相邻，直到没有更多空间。 当页面的宽度已经填充时，我希望它们开始重叠，以便均匀地分隔它们。 此外，当单击一个表单时，它将被带到前面。 下面是一张粗略的图纸和我到目前为止的一个例子。 我该怎么做呢？

书中的页面

$('#AddForm').click(function (){ var Target = $('#Fixed').find('tr'); var height = Math.random() * (100 - 50) + 50; var HEX = '3456789ABCD'; var Color = '#'; for (var i = 0; i < 6; i++ ) { Color += HEX[Math.floor(Math.random() * 11)]; } var Form = $("
Form
").css("background", Color).css('height', height+"px"); var Cell = $("") Cell.append(Form) Target.append(Cell) }); 

 #Fixed{ position: fixed; bottom: 0; right: 0; width: 100%; } .FullWidth{ width: 100% } .Form div{ width: 200px; white-space:nowrap; } #AddForm{ position: absolute; z-index: 999; } 

  Add Form 
   

Answer 1

我用flexbox做了这个工作。 这是css，剩下的就是小提琴：

 #fixed{ position: fixed; bottom: 0; right: 0; width: 100%; display: flex; flex-flow: row nowrap; align-self: flex-end; align-items: flex-end; } .form{ width: 200px; white-space:nowrap; display: flex; flex-flow: column wrap; opacity: 0.8; } .form + .form{margin: 0 0 0 -20px;} #addForm{ position: absolute; z-index: 999; } 

https://jsfiddle.net/7np8pm53/1/