Is there a way to have HTML elements in an overflow: scroll DIV always remain on top of other elements?

I know the title is awful, I'm not sure quite how to explain it but you can see the issue here: https://jsfiddle.net/qwwhzzc3/8/

If you drag any one of the rows, you can pull it to the drop target (labeled Test) and the drag/drop interaction works (both items will turn green) but it's still "inside" the div and the draggable row appears underneath the drop-target when it should be above.

The problem CSS rules are:

.divTable{
  display: table;
  position: static;
  z-index:1000;
  width: 100%;
}
.divTableRow {
  display: table-row;
  position: inherit;
  z-index:1000;
  background-color:#fff;
}
.container {
  width: 100%;
  height: 500px;
  overflow: scroll;
}

I've tried messing around with all variations of position to get this to work but I'm left scratching my head. If I do something like absolute, the styling is ruined. Relative and static do nothing. Is there a way to pull that row "out" of the scrolling container so that it can be the topmost element on the screen?

from Is there a way to have HTML elements in an overflow: scroll DIV always remain on top of other elements?