How can I style every child item with respect to the main parent in an iron-list?

Question

I have an iron-list with a simple <div> inside. When the iron-list iterates over the array of data I want each instance of <div> to be styled with respect to the top of the main iron-list but no matter what I try (combinations of absolute and relative styles) I can't seem to get it to work. I would appreciate if anyone can help me achieve this. Below is the related code:

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

When a child size changes, that only child repositions correctly with respect to the top of iron-list but if I refresh the page the reference seems to change to the last child above it rather than the top.