Lez.5 - Corso Avanzato Css

POSITION FIXED
in un foglio di stile Css

Position Fixed

Sintassi: position: fixed;
con il valore della proprietà position impostato su fixed (fisso) togliamo l'elemento dal flusso della pagina e lo posizioniamo sfruttando la proprietà offset (top, botton, left, right).

E' essenziale notare che se c'è uno scrolling della pagina, l'elemento essendo immune allo scrollig, rimane fisso nel punto in cui lo abbiamo posizionato, fluttuando in essa e galleggiando sugli altri elementi rimanendo in primo piano.

Ora osserviamo, che nel caso l'elemento abbia un posizionamento assoluto (position: absolute;) l'elemento è posizionato in base alla proprietà del suo contenitore che lo racchiude (se questo è stato a sua volta posizionato con un valore diverso da static), invece con fixed l'elemento non bada più ai suoi contenitori, esso si posizina sempre a partire dalla viewport cioè dalla schermata visibile, o se vogliamo dall'area visibile del browser.
Con questa tecnica possiamo trasformare qualsiasi oggetto html in un menù di navigazione che sta sempre fissato in un certo punto della schermata (chiaramente ci sono altri modi per formulare dei menù, questo è un modo semplice e veloce), oppure inserire un'immagine che rimane sempre fissa, posizionata in un determinato punto dello schermo da noi voluto e che non si sposta da li.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Position fixed</title>
  <meta charset="utf-8">
  <style type="text/css">
    #zorro {
	    background-color: aqua;
	    width: 200px;
	    height: 200px;
	    position: fixed;
	    top: 30px;
	    right: 50px;
    }
  </style>
 </head>
 <body>
   <h1>Position fixed (fisso)</h1>
   <h2>Blocco di testo 1</h2>
   <p>Questo blocco di testo serve per capire come si posiziona un   elemento impostando la proprietà position con il valore fixed. Questo   blocco di testo serve per capire come si posiziona un elemento   impostando la proprietà position con il valore fixed.</p>
   <div id="zorro">
	   Sono zorro - con position: fixed;
   </div>
   <h2>Blocco di testo 2</h2>
   <p>Questo blocco di testo serve per capire come si posiziona un   elemento impostando la proprietà position con il valore fixed. Questo   blocco di testo serve per capire come si posiziona un elemento   impostando la proprietà position con il valore fixed.</p>
   <h2>Blocco di testo 3</h2>
   <p>Questo blocco di testo serve per capire come si posiziona un   elemento impostando la proprietà position con il valore fixed. Questo   blocco di testo serve per capire come si posiziona un elemento   impostando la proprietà position con il valore fixed.</p>
 </body>               
</html>