To demonstrate my issue, I have created a fiddle: http://jsfiddle.net/AVxbd/
The problem lies in a menu (#container) with links (#text1, #text2). An element called #highlighter is used to highlight the link of the current page. Here is the HTML:
<div id="container">
<div id="highlighter"></div>
<div id="text1">Text 1</div><div id="text2">Text 2</div>
</div>
The JavaScript code is as follows:
$('#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 issue I am facing is that the #highlighter appears on top of the #text1 and #text2 elements, which is not the intended behavior.
I attempted to resolve this using z-index:
#container { z-index: 1; }
#highlighter { z-index: 2; }
#text1, #text2 { z-index: 3; }
However, this solution did not work as expected, as shown in the fiddle.
How can I rectify this issue? Ideally, I would like the #text1 and #text2 elements to appear with an orange background while still allowing the highlighter to animate in width and position without affecting them.