JQuery drag and drop position on multiple drop to one droppable area

JQuery drag and drop position on multiple drop to one droppable area

I have created a very simple drag and drop quiz, where the user has a list
of 8 actions that they must drag into the correct drop area (there are 3
drop areas). So I might have 2 or 3 items being dropped onto one droppable
div.
This works fine except the actions are dragged on top of the previous
dropped action, rather than stacking beneath.
I cant seem to find a definitive list of options to use with
ui.draggable.position. This is the code I'm currently using to place the
drop:
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
But as I said above, they are just placed on top of the previous drop.
Below is the style that is being generated by 2 dragged items onto 1
draggable area:
1st draggable div:
<div id="section1" class="ui-draggable correct ui-draggable-disabled
ui-state-disabled" style="position: relative; z-index: 8; left: 410px;
top: 0px;" aria-disabled="true">Use one measure of soap</div>
2nd draggable div:
<div id="section1" class="ui-draggable correct ui-draggable-disabled
ui-state-disabled" style="position: relative; z-index: 9; left: 410px;
top: -50px;" aria-disabled="true">Rinse thoroughly
(fingers/thumbs/wrists)</div>
Hope that makes sense.
Can anyone shed any light how to get these to stack properly?
Much appreciated Alan