collegamenti a piè di pagina cliccabile (bottom-fisso e dietro di contenuti), quando di overflow-x è nascosto per html e corpo

Situazione:collegamenti a piè di pagina cliccabile (bottom-fisso e dietro di contenuti), quando di overflow-x è nascosto per html e corpo

Dato il seguente esempio HTML semplificato:

mettere un footer dietro contenuti, lo rendono bottom-appiccicoso
quando si scorre fino alla fine della pagina: piè di pagina deve svelare da dietro contenuti

sono stato in grado di fare questo, ma quando ho html e body sia impostato è overflow-x proprietà a hidden quei link nel piè di pagina non sono cliccabili.

Update per situazione:

so che è possibile impostare z-indici per #content a 2 e per footer a 1 per rendere i link cliccabile, ma che interferisce con un multizoom.js da un diverso parte della pagina e non è di mio interesse.

Domanda:

Ciò che è l'impostazione overflow-x sia html e body a che fare con i link nel footer? E perché entrambi gli elementi impostano questa proprietà? (Se solo uno di loro omette overflow-x i link sono cliccabili)

In realtà per me non è un problema piú per impostare overflow-x nel progetto originario, perché era un residuo tentativo styling obsoleto ed è stato rimosso già. Ma sono curioso del perché c'è un comportamento così strano?

Esempio:

/* This statement prevents the links in the footer 
 
* from being clickable */ 
 
html, body { 
 
    overflow-x: hidden; 
 
} 
 
/* necessary statements to put footer behind content and 
 
* make it bottom sticky behind content */ 
 
#content { 
 
    /* opaque bg color to block out footer*/ 
 
    background: lightgrey; 
 
    /* border bottom to see where content ends */ 
 
    border-bottom: 1px solid black; 
 
    /* arbitrary height as content placeholder to provoke scrolling */ 
 
    height: 1500px; 
 
    /* use margin to stretch the page in order for 
 
    * footer to become visible at the end of scrolling */ 
 
    margin-bottom: 120px; 
 
} 
 
footer { 
 
    /* bg color to distinguish footer from content */ 
 
    background: grey; 
 
    /* make footer 120px high, centered */ 
 
    padding: 50px; 
 
    line-height: 20px; 
 
    text-align: center; 
 
    /* put footer one layer behind content so that content scrolls 
 
    * before footer while footer itself is fixed at the bottom */ 
 
    z-index: -1; 
 
    position: fixed; 
 
    bottom: 0; 
 
    /* use all the width possible */ 
 
    width: 100%; 
 
} 
 
body { 
 
    /* make page use the whole panel */ 
 
    margin: 0; 
 
}

<html> 
 
<body> 
 
    <div id="content"> 
 
     Here is the content, scroll down until end of page 
 
    </div> 
 
    <footer> 
 
     <a href="#">Here is the footer link (not clickable at the moment)</a> 
 
    </footer> 
 
</body> 
 
</html>

fonte

2016-04-22 xmoex

Quando si imposta il parente '# contenuto' con' z-index: 2; 'e footer' z-index: 1; ', tutto funziona. Sembra che il corpo abbia un problema con 'z-index: -1;'. – Huelfe

So che funziona con z-indexs 2 vs 1 (e aggiornerò la domanda) ma che interferisce con uno script multizoom (che sarebbe un problema completamente diverso) – xmoex

@xmoex Quindi '# contenuto' non dovrebbe avere z-index? O è 'footer' che dovrebbe avere' z-index: -1; '? – Green

Come posso vedere il suo margine crollare. Il tuo #content ha margin-bottom: 120px produce uno spazio vuoto nella parte inferiore e overflow: hidden; produce un nuovo contesto di formattazione che consente al corpo di essere all'altezza del blocco #content. z-index: -1 spinge footer dietro body in questo caso e non è possibile fare clic sul collegamento.

Ma quando si rimuove overflow proprietà, body avrà minore altezza rispetto #content a causa di margin-bottom e #footer divenne al di fuori di body e dopo che i collegamenti diventano cliccabili.

Si noti inoltre che la proprietà overflow su viewport non ritaglia elementi fissi fuori dal genitore, per cui #footer rimane visibile e attiva.

fonte

2016-04-22 11:57:50 t1m0n

Ciò che è l'impostazione di overflow-x sia html e corpo a che fare con i link nel footer? E perché entrambi gli elementi impostano questa proprietà? (Se solo uno di essi omette overflow-x i collegamenti sono selezionabili)

In effetti per me non è più un problema non impostare overflow-x nel progetto di origine perché era un residuo di un tentativo di stile obsoleto ed è stato rimosso già. Ma sono curioso del perché c'è un comportamento così strano?

Come hai detto it will work when you remove style from html.

Perché la gente ha lo stile html tag?

Per ora ho riscontrato almeno tre casi in cui le persone sono in stile html.

Quando vogliono impostare i valori proprietà globali per quelli che eredita i valori dai loro antenati.
Quando vogliono forzare il browser per visualizzare la barra di scorrimento.
```
html, body { 
    min-height: 100.1%; 
} 
```
Quando vogliono fare un tavolo fuori dalla pagina.

Possiamo stile html perché è elemento DOM che prende gli attributi normali (W3 on html), ma io, e per quanto ne so un sacco di altre persone, fortemente consiglia di evitare l'uso di esso, a meno che non si vuole fai alcuni trucchi fantastici con esso. Styling html può portare a comportamenti indesiderati a causa del modo in cui i browser funzionano. Tieni presente che body non è l'unico figlio di html. C'è anche head. Quando vuoi dare uno stile alla parte visibile della tua pagina hai body (perché dovresti disegnare la parte invisibile al primo posto?).

fonte

2016-04-22 11:54:25 Green

Il problema sembra essere che il piè di pagina ha uno z-index negativo e il corpo non ne ha (quindi il valore predefinito è 0?). Inserendo il valore overflow-x: nascosto nella dichiarazione css del corpo si estende il corpo sopra il piè di pagina (vedere la risposta t1m0n per il motivo).

L'aggiunta di uno z-index inferiore al corpo e la relativa posizione relativamente corretta risolve il problema su Chrome, IE, Firefox e Edge.

body { 
    position: relative; 
    z-index: -2; 
}

/* This statement prevents the links in the footer 
 
* from being clickable */ 
 
html, body { 
 
    overflow-x: hidden; 
 
} 
 
body { 
 
    position: relative; 
 
    z-index: -2; 
 
} 
 
/* necessary statements to put footer behind content and 
 
* make it bottom sticky behind content */ 
 
#content { 
 
    /* opaque bg color to block out footer*/ 
 
    background: lightgrey; 
 
    /* border bottom to see where content ends */ 
 
    border-bottom: 1px solid black; 
 
    /* arbitrary height as content placeholder to provoke scrolling */ 
 
    height: 1500px; 
 
    /* use margin to stretch the page in order for 
 
    * footer to become visible at the end of scrolling */ 
 
    margin-bottom: 120px; 
 
} 
 
footer { 
 
    /* bg color to distinguish footer from content */ 
 
    background: grey; 
 
    /* make footer 120px high, centered */ 
 
    padding: 50px; 
 
    line-height: 20px; 
 
    text-align: center; 
 
    /* put footer one layer behind content so that content scrolls 
 
    * before footer while footer itself is fixed at the bottom */ 
 
    z-index: -1; 
 
    position: fixed; 
 
    bottom: 0; 
 
    /* use all the width possible */ 
 
    width: 100%; 
 
} 
 
body { 
 
    /* make page use the whole panel */ 
 
    margin: 0; 
 
}

<html> 
 
<body> 
 
    <div id="content"> 
 
     Here is the content, scroll down until end of page 
 
    </div> 
 
    <footer> 
 
     <a href="#">Here is the footer link (IS CLICKABLE NOW!!)</a> 
 
    </footer> 
 
</body> 
 
</html>

fonte

2016-04-22 12:00:43 Ben

-1

ho risolto il problema con queste modifiche al css:

#content { 
    ... 
    z-index: 1; 
    position: relative; 
} 

footer { 
    ... 
    z-index: 0; 
}

Spiegazione

Quando si imposta z-index: -1 per il footer, lo pone DIETRO lo body, rendendolo invalicabile.

Vogliamo sopra il body, così abbiamo impostato la sua z-index: 0 (o rimuovere del tutto)

Questo significa che anche bisogno di aumentare il contenuto, in modo da impostare il suo z-index: 1

MA - perché il piè di pagina è fisso, viene visualizzato SOPRA quello che non ha una posizione corretta, quindi è necessario impostare position: relativecontent per mantenere il comportamento percepito.

fonte

2016-04-24 13:11:59

La domanda riguardava il ruolo di overflow-x: hidden set to html e il corpo. Una soluzione senza questo insieme di proprietà funziona perfettamente anche con z-index del piè di pagina impostato su -1 – xmoex

Beh, non ho modificato nient'altro quindi suppongo che le impostazioni di "overflow" siano ancora in atto –

collegamenti a piè di pagina cliccabile (bottom-fisso e dietro di contenuti), quando di overflow-x è nascosto per html e corpo

risposta

Problemi correlati