Posizionare un elemento in fondo al suo div contenitore

**ivanisevic82** · 29-05-2023, 22:29

Rieccomi qui per un problema apparentemente banale, ma che sto incontrando difficoltà a risolvere.

Nel mio sito ho un header che contiene nella parte superiore logo a sinistra e menu a destra.

Questo header è alto 400px e in fondo ad esso appare il titolo della pagina.

Per realizzare ciò ho utilizzato uno stratagemma: ho infilato l'H1 nel contenuto della pagina (sotto l'header) e poi gli ho dato un margin-top negativo, così da farlo "salire" fino all'header, sovrapponendosi ad esso.

Ora però questa soluzioni mi crea dei problemi quando la pagina si restringe, il titolo finisce su due righe e di conseguenza anche il contenuto della pagina slitta in basso.

Per evitare che avvengo ciò e per dare maggiore ordine e coerenza al mio codice, ho pertanto deciso di infilare il titolo dentro l'header, ovverosia nel punto dove effettivamente voglio che appaia.

ll problema che ho incontrato tuttavia consiste nel fatto che voglio il titolo posizionato, anzi, ancorato, al fondo del suo div contenitore (header-container).

Essendoci dello spazio tra gli elementi superiori (logo e menu) e l'elemento che voglio posizionare in fondo all'header (il titolo), dal momento che l'header ha una certa altezza, non posso usare semplicemente un posizionamento relativo, altrimenti il titolo sarebbe posizionato di seguito agli elementi superiori e non in fondo come vorrei.

Facendo qualche ricerca ho capito che la soluzione "canonica" consisterebbe nel dare un posizionamento relativo al contenitore (il mio sito lo aveva già) ed un posizionamento assoluto + bottom: 0 all'elemento che voglio in basso (il titolo).

Ho tentato questo approccio, con il risultato però che il titolo, pur posizionato in basso, rimane fermo quando faccio lo scrolling della pagina...quindi non va bene.

Cosa sbaglio in questo approccio?
Avete una soluzione da suggerirmi?

Grazie per il supporto!

**ivanisevic82** · 31-05-2023, 23:47

A distanza di due giorni dall'apertura del topico e dopo un milione di tentativi, ancora non riesco minimamente a risolvere.

Ho testato un codice dove riesco ad ottenere l'effetto voluto:

codice:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      height: 1500px; /* Altezza del corpo superiore all'altezza del viewport per rendere lo scroll visibile */
      margin: 0;
      padding: 0;
    }


    #header_container {
      position: relative;
      max-width: 1280px;
      margin: 0 auto;
      height: 400px;
      z-index: 999;
      padding-right: 30px;
      padding-left: 30px;
    }
    
    .header__logo {
      float: left;
      margin-left: -12px;
    }


    .header__menu {
      float: right;
      margin-top: 70px;
      list-style-type: none;
      letter-spacing: 2px;
      font-size: 15px;
    }
    
    #Titoli {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      margin-bottom: 20px;
    }




  </style>
</head>
<body>
  <div id="header_container">
    <a href="<?php echo home_url(); ?>" class="header__logo">
      <div id="logo_sito" alt="Logo" class="large"></div>
      <div id="logo_sito_responsive" alt="Logo" class="white"></div>
    </a>


    <div id="header__menu">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>


    <div id="Titoli">
      <h1 class="testo_header_subpage">
        Titolo
      </h1>
      <h2 class="sottotitolo_header_subpage">
        Sottotitolo
      </h2>
    </div>
  </div>
</body>
</html>

Tuttavia, quando uso queste impostazioni nel mio sito, gli elementi contenuti nel div "Titoli" rimangono fissi allo scrolling.

Non so davvero che pesci prendere...Killer, se passi da qui il tuo account per l'accesso al mio sito è ancora attivato.

Grazie!

**KillerWorm** · 01-06-2023, 18:42

Originariamente inviata da ivanisevic82

Non so davvero che pesci prendere...Killer, se passi da qui il tuo account per l'accesso al mio sito è ancora attivato.

Ho dato uno sguardo nel tuo sito ma non noto la situazione che descrivi. Non riesco a capire se hai applicato la modifica che hai indicato.

Ad ogni modo fai attenzione, un elemento con position:absolute fa sempre riferimento al primo elemento ascendente che ha position diverso da static, oppure al body se non viene trovato un elemento con tale caratteristica. L'elemento di riferimento sarà quindi il suo box contenitore.

Bisogna capire dove va ad "incastrarsi" quel div, cioè qual è il suo box contenitore e come questo sia impostato riguardo all'azione di scorrimento.

Fai tu le opportune verifiche, diversamente fammi capire se posso verificarlo io sul tuo sito.

**ivanisevic82** · 01-06-2023, 22:38

Originariamente inviata da KillerWorm

Ho dato uno sguardo nel tuo sito ma non noto la situazione che descrivi. Non riesco a capire se hai applicato la modifica che hai indicato.

Ad ogni modo fai attenzione, un elemento con position:absolute fa sempre riferimento al primo elemento ascendente che ha position diverso da static, oppure al body se non viene trovato un elemento con tale caratteristica. L'elemento di riferimento sarà quindi il suo box contenitore.

Bisogna capire dove va ad "incastrarsi" quel div, cioè qual è il suo box contenitore e come questo sia impostato riguardo all'azione di scorrimento.

Fai tu le opportune verifiche, diversamente fammi capire se posso verificarlo io sul tuo sito.

Ciao Killer e grazie per l’intervento.

Nel sito non vedi nulla perché la modifica la sto testando su un template a parte per non fare disastri.

Ad ogni modo, a livello di struttura html, la differenza è semplicemente che ho spostato i titoli delle pagine dentro l’header, nel senso proprio della parola (dentro i tag), mentre prima apparivano nell’header grazie al margin-top negativo che gli avevo dato, ma erano fuori da esso.

Riguardo alla questione del posizionamento assoluto, la situazione è la seguente:
- ho un header container, che ha position relative.
- dentro questo elemento ci sono il logo a sinistra e il menu a destra, entrambi con posizionamento non esplicitato e float sinistra e destra.
- di seguito il div contenente i titoli, posizionato in maniera assoluta.

Se vuoi fare una prova basta che sposti gli elementi <h1 class="testo_header_subpage> e
<h2 class="sottotitolo_header_subpage"> dentro un div id “Titoli”, da posizionare appena prima della chiusura del div header.

In ogni caso, per agevolarti, attivo il tema su cui sto lavorando, così puoi guardare il codice già modificato.

edit: aggiungo una cosa, con specifico riferimento a quanto hai detto.

Gli elementi ascendenti, che precedono il div Titoli posizionato assolutamente sono il menu è il logo, che non avendo un posizionamento dichiarato dovrebbero essere static e pertanto ininfluenti.

Il medesimo div Titoli è posizionato dentro il div header-container in maniera assoluta ed ha bottom: 0.
header-container ha posizionamento relativo.

Mi sarei quindi aspettato di vedere i titoli ancorati alla parte più bassa del div che li contiene (header-container), senza che però rimangano fissi come se fossero ancorati al body!

**KillerWorm** · 02-06-2023, 15:53

Originariamente inviata da ivanisevic82

Gli elementi ascendenti, che precedono il div

No, quelli non sono ascendenti, ma piuttosto sono fratelli.
Devi considerare gli elementi non static che sono "antenati" (quindi genitori, progenitori) di quell'elemento.

Seguendo la genealogia da body fino a #Titoli, sul tuo sito (che hai aggiornato) ora vedo questo:

codice:

<body>
  <div id="container"> (static)
    <div id="header"> (static) 
      <div id="header_container_sfondo"> (fixed) 
        <div id="header_container"> (relative) 
          <div id="Titoli"> (absolute) 
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Quindi avremo che #Titoli ha come box contenitore #header_container (che è relative) ma a sua volta questo si posiziona rispetto a #header_container_sfondo, il quale (essendo fixed) si posiziona rispetto al viewport.

Va da sé che #Titoli, se pur in modo indiretto, mantiene anche lui il riferimento di base del viewport.

Ora, potresti mettere #Titoli proprio dentro <div id="header">, magari alla fine (cioè dopo il div #header_container_sfondo), questo infatti scorre normalmente con i contenuti (essendo static). Tuttalpiù potresti rendere quest'ultimo relative, e posizionare quindi #Titoli (che è absolute) rispetto a questo.

Fai però attenzione alle varie impostazioni responsive, perché l'altezza dell'header (cioè dello slide di immagini) si riduce su schermi piccoli, per cui il posizionamento del titolo potrebbe creare problemi in quel caso.

**ivanisevic82** · 02-06-2023, 20:44

Caro Killer, come al solito la tua soluzione funziona.
Ho messo il div Titoli appena prima della chiusura dell'header e dato all'header posizionamento relativo. Tutto ok.

C'è stata però una conseguenza inaspettata: i div "overview" e "overview-content" vanno al di sotto dell'header, non appena quest'ultimo viene posizionato relativamente.

Ho provato a dare posizionamento relativo e z-index 999 anche i suddetti div, ma dei due solo overview risulta visibile, mentre overview-content rimane sempre nascosto.

Da cosa può dipendere?

Grazie!

EDIT: aggiungo, ho notato anche che i titoli contenuti del relativo div non sono più "selezionabili" con il mouse. Anche questo non so da cosa possa dipendere.

Mi sembra che le controindicazione comincino a diventare un pò tante...ci sarebbe forse un approccio migliore rispetto a quello che sto utilizzando?

L'obbiettivo da raggiungere è quello di sganciare i titoli dal wrapper (contenuto principale al di sotto dell'header), in modo tale che se il titolo si dispone su due righe in versione mobile, il contenuto del sito non scorre verso il basso.

Si potrebbe forse spostare i titoli sia fuori dall'header che dal wrapper e posizionarli in modo che non influiscano sul contenuto?

O è meglio continuare a lavorare con l'approccio che avevo intrapreso?

**KillerWorm** · 02-06-2023, 20:55

Originariamente inviata da ivanisevic82

C'è stata però una conseguenza inaspettata: i div "overview" e "overview-content"

nel sito non trovo questi div di cui parli

puoi chiarire?

EDIT: trovati... gli do uno sguardo

**ivanisevic82** · 02-06-2023, 20:58

Non li vedi perché sono coperti...con la funzione ispezione di Chrome puoi individuali, stanno appena dopo l'header.

Ho fatto anche un edit sopra, non so se li hai visto...grazie ancora!

**KillerWorm** · 02-06-2023, 21:24

... troppe cose... non riesco più a seguire il filo logico

Meglio affrontare un problema alla volta in modo specifico, chiarendo il più possibile tutti i dettagli del caso.

Originariamente inviata da ivanisevic82

Non li vedi perché sono coperti...

Sì, li ho trovati (vedi mio edit) ma non sulla home

Originariamente inviata da ivanisevic82

con la funzione ispezione di Chrome puoi individuali

Ti prego, senza offesa, ma non c'è bisogno. So come ispezionare gli elementi in una pagina

ma se ti indico che non li ho trovati è perché non ci sono sulla pagina... infatti nella home non sono presenti quegli elementi; li ho trovati solo su "Chi sono" andando quindi ad ispezionare le varie pagine. Sarebbe però stato bene specificarlo, perché così non devo andare a cercare su ogni singola pagina ed evitiamo di fare confusione inutilmente... tutto qui

Ora, abbi pazienza... un problema alla volta e specificando i dettagli; qual'è il problema, cosa riscontri e quale risultato invece ti aspetti. Magari sarebbe bene postare anche degli screenshot così che sia chiaro quello che vai ad indicare.

Originariamente inviata da ivanisevic82

Si potrebbe forse spostare i titoli sia fuori dall'header che dal wrapper e posizionarli in modo che non influiscano sul contenuto?

O è meglio continuare a lavorare con l'approccio che avevo intrapreso?

Con tutta onestà, personalmente avrei lasciato il titolo dove stava, senza sovrapposizioni o altri strani ammennicoli che lasciano il tempo che trovano. Un titolo è un titolo, meglio che sia posto prima dei contenuti e in maniera leggibile... a mio parere l'aspetto funzionale va sempre posto prima di quello puramente estetico. Le due cose vanno dosate opportunamente per trovare un giusto equilibrio... poi chiaramente vedi tu come meglio impostarlo.

**ivanisevic82** · 03-06-2023, 00:24

Hai perfettamente ragione, chiedo venia: avrei dovuto specificare in quali pagine si verifica il problema, sapendo bene che non c'è bisogno che ti dica io come cercare un div (ci mancherebbe...).

Seguendo il tuo consiglio di affrontare un problema alla volta, cerchiamo innanzitutto di capire se è opportuna questa variazione di struttura html, sulla base del risultato che vorrei raggiungere.

Per far ciò bisogno partire dal problema che voglio risolvere, proverò a spiegarlo in maniera analitica, senza mettere troppa carne al fuoco.

Torniamo al sito nella versione precedente, senza le ultime modifiche (ho rimesso il tema originale su wordpress).

Se vai in una qualsiasi delle pagine sotto "aree di attività", in versione mobile, noterai che il titolo è graficamente posizionato al centro dell'header.

Se vai in una delle pagine con il titolo più lungo, noterai che, su uno smartphone, il titolo si dispone su due righe.

Questo ovviamente comporta un'aumento della sua altezza, da cui discende che l'elemento sottostante (ovverosia il corpo del testo) risulta più distanziato dall'header rispetto a quanto non accada in una pagina dove il titolo si dispone su una riga soltanto.

Ho pensato che per ovviare a questo problema l'unica soluzione sarebbe stata quella di separare il titolo della pagina dal corpo del testo, in modo che al variare di dimensioni del titolo il corpo del testo non si sposti.

Ho anche pensato che essendo il titolo graficamente posizionato dentro l'header, sarebbe stato forse più coerente porlo all'interno di quell'elemento anche nel codice.

Ora, lo spostamento del titolo all'interno del tag header ha comportato alcune complicazioni con riferimento ai div "overview" e "overview-content".

Questi elementi sono collocati tra il titolo e il corpo del testo (div "wrapper") e sono anch'essi "sovrapposti" all'header, mediante l'uso di un margin-top negativo.

Purtroppo, da quando ho dato position relative all'header, i suddetti div risultano coperti dall'header e pur intervenendo sullo z-index, non sono riuscito a risolvere, con particolare riferimento all'elemento "overview-content".

Ora, senza approfondire ulteriormente quest'ultima problematica, al fine di evitare di porre troppi problemi in contemporanea, mi concentrerò al momento solo sul corretto approccio da adottare, riservandomi di scendere nell'analisi della suddetta problematica tecnica solo all'occorrenza.

In definitiva, ho pensato che le soluzioni potrebbero essere 2:

1) Concentrarsi per cercare di risolvere ii problemi che affliggono di div "overview" e "overview-content" da quando ho dato il position relative all'header.

2) Lasciare tutto com'era e creare una struttura html alternativa solo per la versione mobile, dal momento che nella versione mobile i div "overview" non sono visibili (display: none) e che è solo nella versione mobile che si verifica il problema del titolo che si dispone su due righe, buttando giù il corpo del testo.

Spero di essere stato più chiaro e di aver affrontato gli argomenti senza fare confusione.

Tra i due approcci quale ti sembra migliore?

In generale preferirei avere un unico markup html per desktop e mobile.
Tuttavia, se ciò comporta troppe complicazioni nella versione desktop, affinché i div overview funzionino a dovere, sarei disposto ad adottare anche la seconda soluzione.

Discussione: Posizionare un elemento in fondo al suo div contenitore

Strumenti discussione

Ricerca discussione

Visualizza

Posizionare un elemento in fondo al suo div contenitore

Permessi di invio