1ページデザイン用のグローバルCSSのオーバーライド

Question

HTML5 1ページデザインのWebテンプレートを購入しましたが、作成者はサポートしていません。ファイル内のページアンカーにリンクするメニューボタンを持つindex.htmlファイルのみがあります。このテンプレートには、テンプレートの全体的なテーマを与えるために、ページの下部にzインデックス付きイメージのグループを配置するCSSのグローバルな部分があります。メニューボタンをクリックすると、対応するページの内容（page_ABOUT、page_SERVICES）は、z-indexedイメージが変更されずに、左から右へスムーズにスライドします。それは美しく動作します。 A LIVE DEMO CAN BE SEEN HERE

私の問題は、一番下の画像がないという点で一枚のページアンカーが必要であるということです。そのページのHTMLファイルを別に作成すると、他のHTMLファイルと同じようにスライドしないため、その効果は損なわれます。ページが更新されます。私の質問：index.htmlページ内の1つのページアンカーのグローバルCSSを、そのページ用に個別のhtmlファイルを作成することなくオーバーライドすることは可能ですか？

それらの画像を配置インデックスファイルにHTMLは次のとおりです。これらのdivクラスによって影響されないように

<div class="add1"></div> 
    <div class="add2"></div> 
    <div class="add3"></div> 
    <div class="add4"></div> 
    <div class="add5"></div> 
    <div class="add6"></div> 

理想的には、私は1つの特定のページのアンカーをしたいと思います。

ユニークなページ（page_PRODUCTS）は、これらのdivタグの中に含まれています

<li id="page_PRODUCTS"> 

        <div class="slogan"></div> 

        <div class="box"> 
        <div class="relative"> 
        <div class="scroll"> 
        </div></div></div> 

それはページの下部にある画像を削除しませんが、スタイルシートの直接リンクはHERE

Answer 1

ですこれらのスタイルは、 "page_PRODUCTS"ページがその画像の前にスライドするようにする必要があります。

#content{z-index:auto;} 
#page_PRODUCTS{z-index:50;}