What I want to do is place the dripping part of the logo onto the container and leave the main part of the logo above. Can anyone give me any advice on how best to do this?
Try give the logo box a (positive) top margin and the same value as a negative bottom margin and the box will move down that distance, but still occupies the same space.
In order to be on top of the container that comes after in the html, give position relative to header or the parent that is a sibling to the container.
Maybe you forgot that z-index is the stacking level the positioned (other than the default position:static) box is set to (default z-index is auto if positioned).