javascript - 表格中的重叠单元格就像书中的页面

Question

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

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

问题:我希望表格单元格的行为有点像书中的页面，我希望创建的每个新表格都紧挨着前一个表格，直到没有更多空间为止。当页面的宽度被填满后，我希望它们开始尽可能多地重叠以均匀地间隔它们。同样，当单击表单时，它会被带到最前面。下面是一张粗略的图和我目前所拥有的一个例子。我该怎么做？

Pages in a book

$('#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 = $("<div>Form</div>").css("background", Color).css('height', height+"px");
  var Cell = $("<td class='Form' valign='bottom'></td>")
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='AddForm'>Add Form</button>
<div id='Fixed'>
  <table>
    <tbody>
      <tr>
        <td class='FullWidth'></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

我用 flexbox 完成了这项工作。这是 css，其余部分在 fiddle 中:

#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/