HTML: How to get a child element to show behind (lower z-index) than its parent

Question

I need for a certain dynamic element to always appear on top of another element, no matter what order in the DOM tree they are. Is this possible? I've tried z-index (with position: relative), and it doesn't seem to work. I hate to be vague, but this is the simplest way I can think of asking this question without explaining its purpose ad nauseum.

So, to recap, I need

<div class="a">
    <div class="b"></div>
</div>

<div class="b">
    <div class="a"></div>
</div>

To display exactly the same when rendered. And for flexibility purposes (I'm planning on distributing a plugin that needs this functionality), I'd really like to not have to resort to absolute or fixed positioning.

Addendum: For what it's worth, to perform the function I was wanting to, I made a conditional statement where the overlapping child element would become transparent in the case it was blocking view of its parent. It's not perfect, but it's something.

Answer 1

what you need is position: absolute in order for z-index to work.

also you will need to set the left and top css properties to position the element in the correct place. You will probably need to do this with javascript.

Answer 2

If the elements make a hierarchy, it cannot be done that way, because every positioned element creates new stacking context, and z-index is relative to the elements of the same stacking context.