Position fixed: come funziona e come si utilizza il posizionamento fisso?
Qualche settimana addietro abbiamo visto nel dettaglio l’utilizzo del posizionamento assoluto di un elemento all’interno di una pagina web mediante l’uso della proprietà “position” fornita dai CSS.
Nell’articolo di oggi vedremo com’è possibile attraverso l’utilizzo della stessa proprietà – assegnandole ovviamente un valore diverso rispetto a quello visto nel precedente articolo – rendere un elemento sempre presente sulla pagina, in modo fisso, anche quando questa scrolla verso il basso. Stiamo parlando del posizionamento fisso.
Cosa s’intende con posizionamento fisso e qual è la differenza con il posizionamento assoluto?
Per il posizionamento fisso valgono le stesse regole viste per il posizionamento assoluto: il valore “fixed” impostato alla proprietà “position” indica che l’elemento deve essere posizionato in modo assoluto rispetto all’elemento radice HTML che coincide con l’area del browser, sottraendolo quindi dal normale flusso del documento. L’elemento viene successivamente posizionato in base al valore delle coordinate fornite attraverso le proprietà: “top”, “left”, “right” o “bottom”.
La differenza con il posizionamento assoluto consiste nel fatto che quando l’utente scrolla la pagina, l’elemento con posizionamento fisso non scrolla con essa ma rimane fissato sullo schermo.
Dopo aver dato uno sguardo alla parte teorica è il momento di passare alla pratica e vedere come implementare questa proprietà all’interno dei nostri lavori.
Come si utilizza il posizionamento fisso?
Come esempio pratico prenderemo in considerazione un caso reale applicato al tema del nostro blog, il posizionamento fisso delle tre icone relative ai nostri account di Twitter, Facebook e iscrizione ai feed.
Se possiedi una risoluzione video superiore ai 1024px di larghezza avrai notato che queste tre icone – visualizzate sul lato destro esterno del contenitore del nostro blog – continuano a restare nella loro posizione d’origine anche quando la pagina scrolla verso il basso.
Vediamo un po’ come siamo riusciti ad ottenere questo risultato.
Innanzitutto carichiamo le tre immagini assegnando a ciascuna il relativo link:
<body>
<!-- START SOCIAL FIXED -->
<div class="box-fixed">
<a href="#" title="YIW on Twitter">
<img src="images/bg/fixed/twitterfixed.gif" alt="twitter" />
</a>
<a href="#" title="Become a Fan">
<img src="images/bg/fixed/facebookfixed.gif" alt="facebook" />
</a>
<a href="#" title="subscribe feed">
<img src="images/bg/fixed/rssfixed.gif" alt="rss" />
</a>
</div>
<!-- END SOCIAL FIXED -->
Ti starai chiedendo in quale punto del documento va inserito questo markup?
Abbiamo detto che il posizionamento fisso sottrae il contenuto dal normale flusso del documento quindi può essere inserito in qualsiasi punto perché verrà comunque sottratto dal flusso del documento e posizionato sullo schermo secondo i valori definiti di seguito con le proprietà: “top”, “left”, “right” o “bottom”.
Per esempio sul tema di YIW lo abbiamo aggiunto proprio all’inizio del documento, subito dopo il tag <body>.
Come hai potuto notare nel markup HTML abbiamo assegnato una classe denominata “box-fixed” alla sezione che contiene le tre immagini; adesso vediamo quali proprietà assegnare a questa classe affinché il contenuto di questa sezione possa restare sempre fisso sullo schermo anche quando la pagina viene scrollata dall’utente:
.box-fixed {width:60px;position:fixed;top:370px;right:15px;z-index:0;}
Come puoi vedere – analizzando la riga di codice riportata sopra -abbiamo assegnato una larghezza di 60px al nostro box e poi lo abbiamo posizionato in modo fisso sullo schermo portandolo a una distanza di 370px dall’alto della finestra del browser e a 15px dal lato destro della finestra del browser.
A che cosa serve la proprietà z-index?
Probabilmente ti starai chiedendo a cosa serve la proprietà “z-index” impostata a zero.
Sull’utilizzo della proprietà “z-index” vorrei dedicare in futuro un intero articolo poiché si tratta di una proprietà molto interessante introdotta dalle specifiche dei CSS2: in pratica tramite l’utilizzo di questa proprietà possiamo disporre i nostri box su più livelli – nel caso questi si trovino a occupare la stessa area dello schermo – (per chi utilizza programmi di fotoritocco il funzionamento è simile ai livelli/layers messi a disposizione da questi applicativi) definendone l’ordine di sovrapposizione. Gli elementi che hanno impostato un valore maggiore sono disposti più in alto rispetto agli elementi che hanno valori minori.
Nel nostro caso specifico quando l’utente si trova a scrollare la pagina fino in fondo abbiamo la necessità di disporre la sezione delle tre icone in modo che si posizioni sotto il livello del footer cosicché queste vadano sotto lo sfondo del footer evitando di dare lo sgradevole effetto estetico di tre quadrati bianchi posizionati su uno sfondo rosso. Ecco spiegata la presenza di questa proprietà all’interno della nostra riga di codice. Comunque riprenderemo questo argomento in un prossimo articolo dove vedremo più nel dettaglio l’utilizzo di questa proprietà.
Conclusioni
Abbiamo già detto – e lo ripeto nuovamente – che il posizionamento degli elementi è uno degli argomenti più ostici riguardanti i CSS, dopo l’utilizzo del posizionamento assoluto affrontato nell’articolo precedente questa settimana abbiamo esaminato anche l’impiego del posizionamento fisso.
Come hai avuto modo di vedere, una volta compreso il funzionamento e l’utilizzo di queste proprietà, basta davvero poco per ottenere degli effetti di notevole impatto estetico e cosa ancora più importante non hai più nessun limite a posizionare gli elementi nei punti desiderati all’interno del tuo layout.
E a te è mai capitato di far correggere o rivedere tu stesso un particolare layout proprio perché non eri in grado di posizionare alcuni elementi così come erano stati disegnati all’origine?
Altri alrticoli sul posizionamento trattati da YIW
Per renderti più agevole la consultazione di determinati argomenti di seguito ti propongo una piccola raccolta di articoli che abbiamo trattato e che riguardano il posizionamento degli elementi:
L'autore
28 commenti
Trackback e pingback
-
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by nando_p: RT @YIW Position fixed:…
Bella pillolina Nando!
Fai presto ad inserire l’articolo sul z-index: eviterai un sovraffollamento degli ospedali psichiatrici. :-D
Molti non ne conoscono l’esistenza ed impazziscono su cose facilmente risolvibili con questa proprietà.
Anni fa l’ho scampata per un pelo… :-D
Ciao Vito e grazie =)
In effetti quando un web designer è riuscito ad addomesticare box model, posizionamenti, e z-index può fare davvero di tutto con un layout web.
chiaro e preciso!
:)
Grazie Aldo, gentile come sempre =)
cmq bei ricordi sul layerismo e gli identificatori… azz meglio di proust
Bell’articolo, come sempre. E soprattutto utile.
Grazie mille
Grazie a te QKappa per i complimenti e a presto.
Ottimo… attendo anche io il z-index finalmente potrò capirci qlcs…
Ciao Laura e grazie per essere passata. Tra un paio di settimane conto di pubblicare l’articolo sull’utilizzo della proprietà z-index.
Per la prossima settimana è già in programma la pubblicazione di un’intervista ad un grande artista internazionale che è riuscito a fare della sua passione un business online.
A presto
Ciao Nando complimenti per questo blog che ho conosciuto grazie allo sfogo di Antonio Fullone, a volte le cose migliori ci stanno sotto gli occhi ma non si riescono a scorgere in tempo.
Ora ti metto nei preferiti, così magari imparo davvero qualcosa sul webdesign senza essere costretto ad imparare l’inglese :)
Ciao Alberto, grazie per i complimenti che divido equamente con tutti gli altri autori di YIW =)
Fa piacere sapere che il nostro lavoro viene apprezzato e ringrazio Antonio per averci segnalato insieme ad altre valide risorse italiane.
A presto
Ottima “dritta” ;)
Grazie Fabri e a presto.
Ciao,
a proposito del posizionamento fisso, come si può inserire il frame (?)che è qui in basso per il download dell’ebook?
Sto cercando una soluzione da giorni per joomla, ma credo di dover inserire il codice a manella e mi sto un pò perdendo.
Ciao Francesca, basta assegnare la posizione fissa all’elemento interessato e per posizionarlo in fondo alla pagina poi assegna il valore desiderato alla proprietà bottom, esempio:
#box { position: fixed; z-index: 100; left: 0; bottom: misura_che_ti_serve_per_posizionare_l_elemento; width: 100%; height: altezza_dell_elemento; }Ottimo, ti ringrazio :)
Il problema del fixed a destra, che ho anche nel menù del mio sito, è che quando premi il pulsante del browser in alto a destra per ridurre la finestra il menù scompare e non riappare neanche scrollando. L’effetto funzia solo con la finestra a pieno schermo…. sinceramente navigare con la finestra in dimensione ridotta non ha molto senso, però è un’pò sgradevole sapere di questo bug… se qualcono trova una soluzione farebbe cosa gradita ;)
Ciao ennio, scusa intanto il ritardo con cui ti rispondo. Non ho ben capito a quale bug ti riferisci.
Il fatto che le icone dei social vadano a finire sotto la sidebar (quando la finestra del browser è ridimensionata) è voluto, lo abbiamo realizzato utilizzando la proprietà z-index dei CSS per evitare che le icone si andassero a sovrapporre appunto con il contenuto della sidebar.
Ciao, il problema lo noti meglio se vai sul mio sito.
http://www.ennioberti.it , in pratica quando ridimensiono la finestra del browser e faccio lo scroll in orizzontale con la barra sotto, non si vede più il menù fixed che ho messo a destra. Torna a vedersi solo nel momento in cui espando nuovamente la finestra del browser a pieno schermo. Volevo sapere se c’è una maniera per evitare sto problema.
Ciao ennio, ho provato a dare uno sguardo al tuo problema. A prima vista mi sembra che non si tratti di un problema dovuto al posizionamento fisso bensì al markup che hai utilizzato per ottenere il risultato.
In questo template abbiamo utilizzato il posizionamento fisso per il menù di navigazione, se provi a ridimensionare la finestra a qualsiasi dimensione ti accorgerai che il problema non sussiste.
Prova a riscrivere il codice nel modo più pulito possibile, devi aver commesso qualche errore nella struttura generale del layout.
ok, penso di aver capito, secondo me se sposto il mio menù da destra a sinistra dovrei ottenere il vostro stesso risultato.
Comunque a pagina intera il problema non persiste quindi il danno è relativo.
Grazie per le risposte, tornerò ancora sul vostro blog. Buona serata.
Di nulla, ennio, figurati! In effetti il danno è relativo, bisogna ridimensionare appositamente la finestra a una dimensione molto più piccola di quella standard, il che dubito possa capitare.
A presto e buon lavoro.
Ciao Nando,
ho seguito il tuo consiglio e funziona, ma quello che non sono riuscita ad ottenere è l’effetto “elastico” del banner qui sotto e il relativo “chiudi” e “non mostrare più”. Dovrei adattarlo ad un sito fatto con joomla. Puoi passarmi il codice? Ti ringrazio in anticipo.
Ciao Francesca, l’effetto elastico lo abbiamo realizzato in javascript sfruttando le potenzialità del framework jQuery.
Contattaci tramite il modulo che trovi in alto( nel menù di navigazione del sito) e ti passeremo il codice che ci hai richiesto.
Rileggendo questo articolo mi sorge una domanda che riguarda quersto stile e credo anche javascript dove purtroppo non sono ferrato.
http://www.repubblica.it/politica/2010/12/14/dirette/diretta_fiducia_marted-10165275/?ref=HREA-1
vedete il box di destra? diventa fixed dopo una certa altezza, suppongo che sia semplicemente un cambio di classe con jQuery ma la mia domanda è: “come posso capire che il browser ha raggiunto una determinata y?”
questo risolverebbe un bel problemino anche al mio sito http://www.webdesignermilano.it dove ho posizionato il blocco dei social sotto la fascia azzurra ma ovviamente mantiene quella distanza anche quando scorre.
grazie
Andrea
Salve
scusami ma per mettere un banner complesso come quello che hai qui in basso come hai fatto?
Vorrei fare anch’io qualcosa di simile mi puoi aiutare?
Grazie
Ciao Nando,
volevo sapere se per la Bottom Bar del tuo sito avevi usato questo Plugin
http://yithemes.com/themes/plugins/yith-footer-banner/
o l’hai realizzata completamente tu….
Grazie Mille