3

我创建了这个小提琴来说明我的问题：http: //jsfiddle.net/AVxbd/

我有一个菜单 ( #container)，带有一些链接 ( #text1, #text2)。我制作了一个#highlighter元素来突出显示该人在特定时刻所在页面的链接。的HTML：

<div id="container">
    <div id="highlighter"></div>
    <div id="text1">Text 1</div><div id="text2">Text 2</div>
</div>

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);
});

问题是#highlighter元素显示在和元素上#text1。#text2那不是我想要的！

我试图用 z-index 解决这个问题：

#container {     z-index: 1; }
#highlighter {   z-index: 2; }
#text1, #text2 { z-index: 3; }

但是，这不起作用，正如您在小提琴中看到的那样。

我怎样才能让它工作？我想让#text1and#text2元素看起来像具有橙色背景，但是因为我希望荧光笔在宽度和位置上设置动画，所以我不能只给这些元素本身提供背景。

4

3 回答 3

8

添加position: relative;到#text1, #text2

http://jsfiddle.net/AVxbd/2/

z-index 仅适用于定位元素。

于 2013-04-17T12:31:51.513 回答
2 
#text1, #text2 {
cursor: pointer;
display: inline-block;
font-size: 30px;
height: 50px;
line-height: 50px;
text-align: center;
z-index: 3;
*position:relative;*

}

将位置添加到此类。如果未定义位置，Z-index 不起作用。

有关位置和 z-index 的详细信息，请单击此处。

于 2013-04-17T12:32:19.077 回答
0

只需position:relative;为#text1 和#text2设置

看演示

于 2013-04-17T12:33:09.947 回答