z-Index problem -- positioning child over parent's sibling

I have a situation as in this screenshot below, but what I want is B behind A and -- the tricky part --开发者_JS百科 b over A.

How could I do that?

Thanks a lot -- Eric.

---

While a screenshot is helpful, some HTML would be even better... Only from the screenshot though, I would suggest raising b's z-index to 2 or 3. That should fix the problem.

Update: I managed to make it work with the following settings: A: z-index:2, position:absolute or fixed, B: z-index:1, position:static, b: z-index:5, position:relative, absolute, or fixed.

---

Just took a look at the source code, and it's a complete mess. It looks like the CSS and JavaScript on the page has been auto-generated by Yahoo and uses their API, and the CSS is actually directly implemented by JavaScript by using inline CSS in the HTML, like so:

<canvas id="fillAreaA" style="z-index: {javascript variable}" width="300" height="500" />

There's probably text on top of it, too, but in short, you shouldn't have any problems with it if you implement it yourself on your own page.

EDIT: I'm looking at this several months later, and can't believe how dumb I was. I now know that the JS is from the YUI library. I defer to Andrew's solution.