link a piè di pagina appiccicoso non cliccabile in Firefox e Chrome

Question

Sto usando un piè di pagina appiccicoso come descritto in:

• How do you get the footer to stay at the bottom of a Web page?
• http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Ho un paragrafo con un link che voglio essere in fondo alla pagina, quindi lo metto in .footer.

Il problema è che il collegamento non è selezionabile in Firefox 3.5.2 e Chrome, è dietro .push. Funziona in IE7 e IE8 ma immagino che non sia molto.

Mi sono divertito con z-indexes ma questo non funziona. A proposito, ho bisogno della posizione: relativa in #page per posizionare alcune cose all'interno di quel div.

C'è un modo per fare un link in .footer cliccabile in tutti i browser?

Le parti rilevanti del codice:

css

html, body { 
    height: 100%; 
} 
#page { 
    width: 962px; 
    text-align: left; 
    min-height: 100%; 
    /* sticky footer part */ 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -90px; 
    /* end sticky footer */ 
    position: relative; 
} 
/* sticky footer part */ 
.push, .footer { 
    height: 90px; 
} 
.push { 
} 
.footer { 
    background: #181f18 url(../images/background-top.png) no-repeat center bottom; 
} 

html

<div id="page"> 
    <div id="wrapper"> 
    <div id="contents">bla bla</div> 
    </div> 
    <div id="footer">bla bla</div> 
    <div class="push"></div> 
</div> 
<div class="footer"> 
    <p><a href="http://www.some-site.com/">Some Text</a></p> 
</div> 

Answer 1

risolto, aggiungendo Postion: relativi e z-index fatto che :

.push, .footer { 
    height: 90px; 
    position: relative; 
} 
.push { 
    z-index: 9000; 
    position: relative; 
} 
.footer { 
    background: #181f18 url(../images/background-top.png) no-repeat center bottom; 
    z-index: 9999; 
    position: relative; 
} 

Answer 2

Ho avuto un problema simile nei browser Webkit. L'impostazione di z-index o position non risolve il problema ma dopo ho impostato -webkit-transform: translate (0,0); il pulsante è nuovamente cliccabile.

Answer 3

Correggimi se ho torto, ma penso che dovresti aggiungere un valore negativo per z-index che lo spinge indietro abilitando il pulsante di collegamento.

questo ha lavorato per me

.footer, .push { 
    height: 4em; 
    position: relative; 
    width: 90%; 
    margin: 0 auto; 
    z-index: -9000; 
}