Several years ago someone posted a hack to do this via CSS injection. Worked well in RP7/8 and should in RP9 as well. It is not officially supported by Axure (although I suppose if you applied the CSS via Axure Cloud plugin then technically it would be supported?) Basically, a way to identify a widget the browser should ignore, making it “unclickable” and thus pass click events to anything behind it.
This said, why does your mobile phone image need to be in front of your dynamic panel? I’ve done many similar things in the past, showing how an app would look and behave on a phone, tablet, watch, printer, car dash, embedded UI on a medical device, etc. to show a real-world context for demos and user tests. If the user can interact with something–your mobile phone screen–then it should logically be in front and touchable/clickable. So your dynamic panel represents the screen of your mobile phone, right? It should be in front of the mobile phone (PNG image). The few times I’ve used Gregor’s CSS trick above was to show screen glare and bezel shadows to make things look more realistic–in one case to test and demonstrate how ceiling lights might interfere with a tabletop display.
If you want to use the mobile phone image to mask out your dynamic panel–perhaps your dynamic panel somehow needs to be larger than the screen size–then you can “cut out” a rectangular hole in the mobile phone image. I prefer Photoshop for this, but you can use Axure’s “slice” feature (right-click image and choose Slice Image or use Ctl+Alt+Shift+S) to slice at the screen boundaries then delete the resulting center image (or hide it or send it to back.)