4

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

enter image description here

How could I do that?

Thanks a lot -- Eric.

Sparky
  • 98,165
  • 25
  • 199
  • 285
Eric
  • 41
  • 1
  • 2

2 Answers2

3

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.

ayyp
  • 6,590
  • 4
  • 33
  • 47
  • Hey Andrew, thanks for your comment. The example is based on the tool on http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp Should be easy to reproduce there, unfortunately changing the z-index of the inner element won't help. – Eric Jul 28 '11 at 18:08
  • @Eric 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`. – ayyp Jul 28 '11 at 18:23
0

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.

Edwin
  • 2,074
  • 1
  • 21
  • 40