JavascriptとCSS – ユーザーアクションに応じてZ-インデックスを作成する方法

私にはテキストが入った2つのdivがあります。
1つは静的であり、すなわちユーザの部分に対するアクションはdiv内の何も変化させず、他のdivは透明であるが、テキストの影はユーザの行動に従って動く。

私はCSSでz-indexについて言及していますが、ブラウザでは実装されていないようです。この場合、div
‘introText’はdiv ‘introTextShadow’の上にある必要があります。

HTML:

<div id="textQuote">
            <div id="introTextShadow">
                This
                world
                rocks
                big
                time
            </div>
            <div id="introText">
                This
                world
                rocks
                big
                time
            </div>
</div>

CSS:

#introText {
    position: absolute;
    top: 200px;
    left: 20px;
    width: 300px;
    height: 50px;
    word-spacing: 0;
    font-size: 16px;
    font-weight: 900;
    color: rgb(100,100,100);
    text-shadow: 1px 1px 1px rgb(1,1,1),
                            -1px -1px 1px rgb(199,199,199);

    opacity: 1;
    z-index: 100;
}

#introTextShadow {
    position: absolute;
    top: 200px;
    left: 20px;
    width: 300px;
    height: 50px;
    word-spacing: 0;
    color: rgb(21,21,21);
    font-weight: 900;
    z-index: 0;
}

JSフィドルです

ベストアンサー
申し訳ありませんが、適切な答えはありません

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です