html - 如何相对于铁列表中的主要父项设置每个子项的样式？

Question

我有一个<div>内部简单的熨斗清单。当铁列表迭代数据数组时，我希望每个实例的<div>样式都相对于主铁列表的顶部，但无论我尝试什么（绝对和相对样式的组合）我似乎都不能让它工作。如果有人能帮助我实现这一目标，我将不胜感激。下面是相关代码：

<app-header-layout has-scrolling-region style="top: 10px; left:0px; float:left; width: 99%; min-height: 535px; background-color: #999;">

  <iron-list id="myList" items="[[data]" as="myItem" selection-enabled multi-selection>
    <template>      

    <div id="divID" style$="background-color:#FFF; height:[[myItem.height]]px; top:[[myItem.top]]px; border-radius: 3px; border-color:#333; border-width:1px; border-style: solid;"></div>

    </template>
  </iron-list>
</app-header-layout>

当孩子大小发生变化时，只有孩子相对于铁列表的顶部正确重新定位，但是如果我刷新页面，引用似乎会更改为它上面的最后一个孩子而不是顶部。