On my page there is a form which when submitted appends a draggable object onto the page. Ideally the object should have a z-index lower than that of the form so the form can be used again. I have tried lowering the z-index of the draggable object by:

1. Changing the z-index for its class in the stylesheet
2. Changing the z-index within the draggable options object.draggable({zIndex:5});
3. Changing the z-index after the object has been appended to the page using .css()

Every time the object is still above the form. Does anyone know why this could be?