Javascript 表格中重叠的单元格就像书中的页面一样

我正在尝试制作一系列表单，用户可以根据自己的需要填写和添加任意多的表单。这些形状在高度上会有所不同（稍后很重要），可以最小化。现在我把它们放在一张桌子里，桌子周围是一个固定位置的div，带有自动溢出功能。它们放在桌子上的原因是，我可以让它们粘在页面底部，不管高度如何。我希望表格单元格的行为有点像书中的页面，我希望创建的每个新表单都与前一个表单相邻，直到没有更多的空间。当页面的宽度被填满后，我希望它们开始重叠，以便均匀地隔开。此外，单击表单时，它会显示在最前面。下面是一张粗略的图纸和一个到目前为止我所拥有的示例

这是我脑子里的胡言乱语，所以如果你觉得有任何困惑，请问

问：我希望表格单元格的行为有点像书中的页面，我希望创建的每个新表单都与前一个表单相邻，直到没有更多的空间。当页面的宽度被填满后，我希望它们开始重叠，以便均匀地隔开。此外，单击表单时，它会显示在最前面。下面是一张粗略的图纸和一个到目前为止我所拥有的示例。我该怎么做

$（'#AddForm'）。单击（函数（）{
var Target=$（'固定'）.find（'tr'）；
var height=Math.random（）*（100-50）+50；
变量十六进制='3456789ABCD'；
var Color='#'；
对于（变量i=0；i<6；i++）{
颜色+=十六进制[Math.floor（Math.random（）*11）]；
}
var Form=$（“Form”）.css（“背景”，颜色）.css（“高度”，高度+“px”）；
变量单元格=$（“”）
Cell.append（表单）
Target.append（单元格）
});
#已修复{
位置：固定；
底部：0；
右：0；
宽度：100%；
}
.全宽{
宽度：100%
}
.表格组{
宽度：200px；
空白：nowrap；
}
#变形金刚{
位置：绝对位置；
z指数：999；
}

添加表单
我用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;
}

你的问题是什么？@JohnH更新为单独的问题