• Home »
  • CSS »
  • Posizionare un elemento fisso in primo piano nel sito con i CSS

Posizionare un elemento fisso in primo piano nel sito con i CSS

Ecco un sistema utile per posizionare un elemento qualsiasi in primo piano, in un punto specifico dello schermo, ad esempio nell’angolo superiore sinistro o nell’angolo inferiore destro. L’elemento verrà visualizzato sovrapposto davanti al sito stesso, in quando si trova in un livello superiore. Ma ecco un esempio pratico:

Il codice riportato sotto mostra un esempio di come è possibile posizionare un elemento <div> fisso, in modo che venga visualizzato in un punto preciso della pagina web.

Clicca qui per vedere l’esempio

Ecco il codice CSS:

#test {
position: absolute; /* elemento fisso, non segue lo scroll */
z-index: 2; /* livello superiore al sito */
top: 50px; /* distanza dal margine superiore */
left: 50px; /* distanza dal margine sinistro */
width: 250px; /* larghezza elemento */
height: 250px; /* altezza elemento */
background: #9CF; /* colore di sfondo */
}

Per visualizzare l’elemento nella pagina basta inserire il codice indicato sotto subito dopo il tag <body>:

<div id="test">CONTENUTO_HTML</div>

Natualmente utilizzando: top, bottom, left e right, possiamo facilmente scegliere dove posizionare l’elemento nello schermo.

Eventualmente per chiudere o nascondere l’elemento basta aggiungere un istruzione javascript simile a questa:

<a href="javascript:void(0)" onClick="document.getElementById('test').style.display = 'none';">CHIUDI</a>

Alternativa
Si può anche creare un elemento del tutto simile a questo ma che segue lo scroll della pagina, ecco la guida

Compatibilità:

browser_ie browser_firefox browser_chrome browser_opera browser_safari

Hai delle idee o dei suggerimenti per migliorare questo articolo? Lascia un commento qui sotto!

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website