Is it possible to z-index divs at different levels?

That is to say, if I had the following:

<div id="a">
    <div id="b"></div>
</div>
<div id="c">&l开发者_开发知识库t;/div>

Would it be possible for me to visually place b beneath c without putting a beneath c? I'm thinking the answer is no but I was curious if there was some css trickery I was unaware of.

---

No, it's not possible. b and a are going to be indexed "together" as a group, and the c will be calculated separately. see http://jsfiddle.net/73KXM/

---

If you did, b would also be behind a and thus not visible.

---

#a {
     z-index: 50;
}

#b {
     z-index: 0;
}

#c {
     z-index: 25;
}

Of course, if #b is entirely contained within #a (no negative margins, etc.), it wouldn't be seen. If you're looking for a sort of circular z-index, I don't think it can be done. You may need to break a div into pieces and "fake" it.

---

Yes, it is. If you want to use z-index, you have to set the position to relative.