Dropdown menù coperto dall'header

**Utonto Tonto** · 17-01-2018, 12:06

Come da titolo i sottomenù del menù appena creato vengono coperti dall'header e non riesco ad individuare la causa di ciò.

codice HTML:

<body>
    <nav>
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="#">REGIONI</a>
                <ul>
                    <li><a href="#">NORD</a>
                        <ul>
                            <li><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></li>
                        </ul>
                    </li>
                    <li><a href="#">CENTRO</a>
                        <ul>
                            <li><a href="regioni/abruzzo/abruzzo.html">ABRUZZO</a></li>
                        </ul>
                    </li>
                    <li><a href="#">SUD</a>
                        <ul>
                            <li><a href="regioni/sicilia/sicilia.html">SICILIA</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    
    <header>
        <h1>Italia & Dintorni</h1>
    </header>

codice:

nav {
    margin: 100px 0;
    background-color: #000000;
}

nav ul {
    padding: 0;
    margin: 0;
    position: relative;
    list-style-type: none;
}

nav ul li {
    margin: 0 -7px 0 0;
    display: inline-block;
    background-color: #000000;
}

nav a {
    display: block;
    padding: 0 10px;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 60px;
    text-decoration: none;
}

nav a:hover {
    background-color: lightgray;
}

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
}

nav ul li:hover > ul {
    display: inherit;
}

nav ul ul li {
    min-width: 170px;
    display: list-item;
    position: relative;
}

nav ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

header {
    position: relative;
    height: 400px;
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: 2px 2px 5px gray;
}

h1 {
    font-size: 200px;
    font-weight: bold;
    color: gold;
    text-shadow: 1px 1px 10px gray;
    text-align: center;
    padding-top: 55px;
}

Un aiutino?

**KillerWorm** · 17-01-2018, 13:02

Questo è il comportamento normale del rendering della pagina. Gli elementi vengono impilati dal basso verso l'alto in base all'ordine con cui sono scritti (e quindi letti) nella pagina HTML. Gli elementi che vengono dopo, hanno un indice di impilamento maggiore rispetto ai precedenti, per questo nel tuo caso è normale che l'elemento header (letto per ultimo) si porti al di sopra dell'elemento nav (letto prima).

Per modificare l'ordine di impilamento è necessario usare la proprietà z-index. Questa può essere applicata solo se un elemento ha un valore di position diverso da static (valore di default).

Nel tuo caso potresti applicare z-index anche solo sull'elemento ul che sta dentro il nav, dato che ha già una position:relative; oppure puoi applicarlo comunque al nav ma dovrai impostare position:relative anche per questo elemento.

Considera inoltre che trattandosi del menu, che si presume debba stare sempre sopra qualsiasi altro elemento della pagina (a parte casi particolari come elementi overlay), è buono applicare un valore sufficientemente elevato per la proprietà z-index. E' facile infatti vedere valori con una serie di 9 (tipo 9999) per questa proprietà applicata agli elementi che devono apparire sempre "a galla" come, appunto, gli elementi di navigazione.

Nel tuo caso puoi quindi aggiungere questa regola sotto il selettore nav ul:

codice:

nav ul {
   /* ...
            qui tutte le altre proprietà esistenti
            compresa position:relative
       ...
   */
   z-index: 999;
}

E' chiaro che si tratta di nozioni di base. Se il tuo intento è quello di studiare i CSS, il mio consiglio è di seguire piuttosto qualche tutorial, cosi che puoi apprendere facilmente anche questo tipo di informazioni.

**Utonto Tonto** · 17-01-2018, 15:48

Grazie per la risposta KillerWorm, nel frattempo io ho inserito "z-index" in "nav ul ul"...fa lo stesso? Pare che funzioni...

Comunque, non so perchè, pensavo che le pagine venissero renderizzate dall'alto verso il basso

**KillerWorm** · 17-01-2018, 16:28

io ho inserito "z-index" in "nav ul ul"...fa lo stesso? Pare che funzioni...

Se ti funziona allora è ok.

Comunque, non so perchè, pensavo che le pagine venissero renderizzate dall'alto verso il basso

No, l'ordine di lettura (cioè il parsing) avviene dall'alto verso il basso, proprio per questo gli elementi renderizzati appaiono impilati a partire da sotto verso sopra; da non confondere però con l'ordine in cui questi vengono disposti sul piano della pagina, che ovviamente è dall'alto della pagina verso il basso (così come vengono letti). Forse è questo fattore inverso tra parsing e impilamento durante il rendering che può ingannare.

Magari un esempio potrebbe aiutare meglio a ricordare come avviene questo passaggio:
Immagina di aprire un album di francobolli e mentre li guardi (dall'alto della pagina verso il basso e da sx verso dx) li prelevi uno per uno e li disponi sul tavolo in modo che si sovrappongano l'uno con l'altro; come pensi che risulteranno impilati? Ovviamente il primo francobollo prelevato e poggiato sul tavolo sarà quello che tocca il tavolo (il livello 0), quindi tutti gli altri, man mano che li poggi, andranno a disporsi sopra questo e impilarsi l'uno con l'altro a livelli sempre maggiori. Mi pare una cosa abbastanza logica, non credi?

Questo, molto terra terra, è ciò che avviene normalmente per gli elementi del DOM durante il parsing di un qualsiasi documento HTML; gli elementi vengono "analizzati", secondo il normale ordine di lettura, e disposti man mano sulla pagina.

Quindi, a meno di non forzare un diverso valore di livello (usando position e z-index) per specifici elementi, il tutto segue questo normale flusso.

Tutto qua.

**Utonto Tonto** · 18-01-2018, 15:29

Vediamo se ho capito, le pagine vengono lette dall'header al footer però vengono rappresentate partendo dal footer per arrivare all'header...giusto?

**KillerWorm** · 18-01-2018, 16:14

Originariamente inviata da Utonto Tonto

Vediamo se ho capito, le pagine vengono lette dall'header al footer però vengono rappresentate partendo dal footer per arrivare all'header...giusto?

No, evidentemente non sono riuscito a spiegarmi.
Sai cosa significa "impilare"?... è come quando metti una moneta sopra l'altra o una carta sopra l'altra per formare un mazzo.
Prova a ragionare in 3D. Prova a paragonare la pagina HTML ad un tavolo visto dall'alto. Prova a buttare un mazzo di carte da gioco sul tavolo; queste sono gli elementi della pagina che vengono disposti con una specifica posizione x e y; ma è possibile che diverse carte vadano a "coprirne" delle altre cioè a mettersi una sopra l'altra, determinando quindi anche una posizione z; questa posizione in CSS è determinata dall'ordine di impilamento (in inglese è detto "stack order").

Se non vengono applicate altre particolari proprietà CSS, per ogni elemento viene attribuito normalmente un valore dello stack order che va dal basso verso l'alto nell'ordine con cui questi elementi vengono letti. Per cui, se sulla pagina dovessero esserci degli elementi sovrapposti, quelli con un valore dello stack order maggiore andranno a coprire quelli con un valore minore.

Questo è il problema che hai riscontrato. Per risolverlo devi quindi impostare uno z-index che andrà a forzare il valore dello stack order di quel tale elemento, portandolo sopra o sotto (parliamo sempre di impilamento) gli altri elementi.

Se hai ancora dubbi vedi qualche guida su stack order e su z-index, io di più non riesco a fare.

**Utonto Tonto** · 18-01-2018, 16:44

Va bene Killer mi documenterò, grazie.

Discussione: Dropdown menù coperto dall'header

Strumenti discussione

Ricerca discussione

Visualizza

Dropdown menù coperto dall'header

Permessi di invio