Override globale CSS für One-Page-Design

Question

Ich kaufte ein HTML5 One-Page-Design-Web-Vorlage, aber der Autor bietet keine Unterstützung. Es gibt nur eine index.html-Datei, deren Menüschaltflächen mit den Seitenankern weiter unten in der Datei verknüpft sind. Diese Vorlage enthält einen globalen CSS-Teil, der eine Gruppierung von z-indizierten Bildern am unteren Rand der Seite platziert, um der Vorlage das gesamte Thema zu geben. Wenn auf eine Menüschaltfläche geklickt wird, gleitet der Inhalt der entsprechenden Seite (d. H. Page_ABOUT, page_SERVICES) glatt von links nach rechts, wobei die z-indizierten Bilder unverändert bleiben. Es funktioniert wunderbar. A LIVE DEMO CAN BE SEEN HERE

Mein Problem ist, dass ich für eine Seite Anker so einzigartig sein muss, dass es diese Bilder nicht am unteren Rand hat. Wenn ich eine separate HTML-Datei für diese Seite erstelle, ist der Effekt ruiniert, da er nicht wie andere einrastet; Es verursacht eine Seitenaktualisierung. Meine Frage: Ist es möglich, das globale CSS für einen Seitenanker innerhalb der index.html-Seite zu überschreiben, ohne eine separate HTML-Datei für diese Seite erstellen zu müssen?

Der HTML-Code in der Indexdatei, die diese Bilder platziert ist:

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

Idealerweise würde ich eine bestimmte Seite Anker nicht gerne von den div Klassen betroffen sein.

Die einzigartige Seite (page_PRODUCTS) innerhalb dieser div-Tags enthalten:

<li id="page_PRODUCTS"> 

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

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

für das Stylesheet Der direkte Link HERE

Answer 1

Während es die Bilder am Ende der Seite entfernen wird nicht ist , diese Stile sollten es so machen, dass die Seite "page_PRODUCTS" vor diesen Bildern gleitet

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