Stacking different HTML elements; which goes above which?

I've made a smiley at the following link: http://jsfiddle.net/UzvWc/4/.

Unfortunately, when I embed the smiley within a complex page, with many different HTML elements, not every part of the smiley a开发者_JAVA百科ppears, some are hidden by other elements.

How can I have my smiley stack over all other elements?

---

It depends. Which elements is it hidden by?

Anyways, here's one "catch-all" way: set

position: absolute;
z-index: 9999;

on the smiley. It should work.