How to prevent child from one element to be on top of another element

(Okay, I know the questions probably sounds rancid bad, so someone edit if they they know how to reformulate it).

So, basically I have开发者_如何学编程 this: jsFiddle

And as you can probably see, I'm trying to re-create a basic windows 7 aero effect (curiosity, fun, learning, etc nothing big), but I stumbled into a few problems. (I will explain only vaguely, since you can see it on the fiddle and otherwise it would be a textathon)

• The text is stuck on top of the parent's(div) parent(div) element.
• The text somehow leaks out of the duplicate element(div), even thought it doesn't from the original.

I know this all sounds odd, but you'll probably best see it on the fiddle.

Thank you.

I think the problem you're having is stemming from this:

$(container).find('*').each(function() {
  var e_clone = $(this).clone(false).appendTo(processor);
  // etc etc
});

By using the * selector then running .each you are cloning more markup into #processor than I think you might have intended to. You get two copies of span.lol in there because first it clones #box (including all its children) and then on the next iteration through the each it copies over span.lol on it own.

As for the "leaking" of text out of the parent, it does happen in the original... at least that's what I see in Chrome if I comment out the call to glass('#container', '#processor').