顯示部件不起作用

我創造了這個小提琴來說明我的問題：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; }

然而，這是不行的，因爲你可以在小提琴看到。

我該如何得到這個工作？我想讓它看起來像#text1和#text2元素有橙色背景，但因爲我想讓熒光筆在寬度和位置上進行動畫製作，所以我不能只給這些元素一個背景。

來源

2013-04-17 Keelan

的'+ 「PX」'未明確需要作爲你沒有使用它的頂部和左側任意設置position:relative;。我認爲z-index也是多餘的，因爲highlighter元素是容器中的第一個元素，請參閱fiddle：http://jsfiddle.net/AVxbd/7/（我將熒光筆移動到最後，所以它是最後一個元素） – Imperative

@Imperative是的，我只是添加它們以確保_that_不是問題。感謝您指出！ – Keelan

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

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

z索引僅適用於定位的元素。

來源

2013-04-17 12:31:51 Kaloyan

'+ 1'和規範鏈接總是有用[CSS/Properties/z-index]（http://www.w3.org/wiki/CSS/Properties/z-index） – andyb

#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不起作用。

For details on position and z-index, click here.

來源

2013-04-17 12:32:19 AnAspiringCanadian

位置總是被定義的，但是通過默認是'靜態' –

只是想讓你知道一個[有用的問題]（http://meta.stackexchange.com/questions/120621/w3fools-alternatives）關於鏈接到w3schools – andyb

我站在糾正，謝謝。 – AnAspiringCanadian

只是爲了＃文本1和＃text2的

SEE DEMO

來源

2013-04-17 12:33:09

顯示部件不起作用

回答

相關問題