Displaying element behind other with z-index doesn't work

I created this fiddle to illustrate my problem: http://jsfiddle.net/AVxbd/ I have a menu (`#container`), with some links (`#text1`, `#text2`). I made a `#highlighter` element to highlight the link of the page the person is on a specific moment. The HTML: ``` <div id="container"> <div id="highlighter"></div> <div id="text1">Text 1</div><div id="text2">Text 2</div> </div> ``` The JavaScript: ``` $('#highlighter') .offset($('#text1').offset()) .width($('#text1').width() ); $('#text1, #text2').click(function(){ $('#highlighter').animate({ top: $(this).offset().top, left: $(this).offset().left, width: $(this).width() + "px" },300); }); ``` The problem is that the `#highlighter` element is displayed over the `#text1` and `#text2` elements. That's not what I want! I tried to solve this with the z-index: ``` #container { z-index: 1; } #highlighter { z-index: 2; } #text1, #text2 { z-index: 3; } ``` However, that doesn't work, as you can see in the fiddle. How can I get this to work? I want to let it look like the `#text1` and `#text2` element have an orange background, but because I want the highlighter to animate in width and position, I can't just give those elements a background themselves.