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

問題は、要素がand要素の上に#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 インデックスは機能しません。

位置と z-index の詳細については、ここをクリックしてください。

于 2013-04-17T12:32:19.077 に答える
0

position:relative;#text1 と #text2 に設定するだけ

デモを見る

于 2013-04-17T12:33:09.947 に答える