Блог

У меня есть два раздела с текстом в них. Один из них статичен, т. Е. никакие действия со стороны пользователя ничего не меняют в div, другой div прозрачный, однако тень текста перемещается в соответствии с действиями пользователя.

Несмотря на то, что я упомянул z-index в CSS, похоже, что он не реализован браузером. В этом случае div ‘introText’ должен находиться поверх div ‘introTextShadow’.

HTML:

 <div id="textQuote">
            <div id="introTextShadow">
                <span id="textshadow01" class="cTextShadow">This</span>
                <span id="textshadow02" class="cTextShadow">world</span>
                <span id="textshadow03" class="cTextShadow">rocks</span>
                <span id="textshadow04" class="cTextShadow">big</span>
                <span id="textshadow05" class="cTextShadow">time</span>
            </div>
            <div id="introText">
                <span id="text01" class="cTextFloat">This</span>
                <span id="text02" class="cTextFloat">world</span>
                <span id="text03" class="cTextFloat">rocks</span>
                <span id="text04" class="cTextFloat">big</span>
                <span id="text05" class="cTextFloat">time</span>
            </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