1 - 6 Marzo 2020 Coding Creativo 1

Position fixed

da Cristina | Mar 6, 2020 | CSS, Web

La proprietà position fixed dei CSS consente di posizionare un elemento in una posizione fissa nella pagina.

Anche in questo caso, come per absolute, l’elemento esce dal normale flusso della pagina. A differenza di prima però il contenitore di riferimento è sempre il corpo della pagina.

Se dunque, ad un elemento assegniamo la proprietà position con valore fixed, esso non scorre con la pagina ma rimane fisso in una posizione.

Position fixed esempio

Facciamo un esempio creando una sezione header con una barra di navigazione realizzata utilizzando gli elenchi puntati. Poi creiamo la sezione main dove inseriremo del testo.

Quando replicate il seguente codice abbiate cura di inserire altro testo all’interno della pagina, in modo da far apparire la barra di scorrimento laterale.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Position fixed esempio</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <header>
      <!-- barra navigazione -->
      <div class="barra">
        <ul>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
        </ul>
      </div>
    </header>
      <!-- / barra navigazione -->

    <main>
    <!-- testo -->
      <div class="arancione">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia, asperiores sed alias ducimus numquam labore, rem odio cupiditate saepe doloribus. Tempora, maxime doloribus neque natus nesciunt qui quam quae!</p>
     
        <!-- inseriamo altro testo in modo da provocare lo scorrimento della pagina -->
      </div>
      <!-- /testo -->

    </main>

  </body>
</html>

Nel CSS impostiamo innanzitutto il margin ed il padding 0 per tutti gli elementi, in modo da non avere gli spazi di default aggiunti da ciascun browser.

Dopo realizziamo la barra di navigazione assegnando la proprietà fixed con posizione dall’alto 0. Diamo anche una larghezza pari al 100% della pagina e un’altezza di 60 pixel.

Per centrare le singole voci del menù di navigazione assegniamo una line-height pari all’altezza della barra.

Togliamo il simbolo dell’elenco puntato e posizioniamo i list item uno accanto all’altro utilizzando semplicemente il display inline-block.

Se inseriamo del testo nel main senza dare un margin top, esso si posizionerà sotto la barra di navigazione. La motivazione è semplice! La barra di navigazione è uscita dal flusso della pagina quindi, non essendo visibile, il contenuto all’interno del main parte proprio dall’alto.

Dunque personalizziamo anche il main dando un margin top uguale all’altezza della barra.

Ecco di seguito il codice di esempio CSS per il funzionamento del position fixed:

* {
  margin: 0;
  padding: 0;
}

/* barra di navigazione */
.barra {
  position: fixed;
  top:0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: yellow;
}

.barra ul {
  list-style: none;
}

.barra ul li {
  display: inline-block;
  font-size: 20px;
}

.barra ul li a{
  text-decoration: none;
  padding: 0 20px;
}

/* corpo principale */
main {
  width: 960px;
  margin-top: 60px auto 0;
}

Come si può notare dall’immagine sotto, anche se scorriamo la pagina, la barra di navigazione rimane fissa in alto.

In questa lezione abbiamo affrontato il position fixed, nelle prossime lezioni farò altri semplici esempi sull’utilizzo di questo elemento.

Lezione precedente: position absolute

Lezione successiva: effetto parallasse con i CSS

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Position absolute

da Cristina | Mar 6, 2020 | CSS, Web

La proprietà position absolute nei CSS consente di rimuovere un elemento dal flusso naturale della pagina, seguendo quanto specificato nelle proprietà top, bottom, left e right.

Se un elemento è posizionato in modalità assoluta, lo è rispetto all’antenato più vicino che ha un valore diverso da static.

Ma, se non c’è nessun elemento che soddisfa queste condizioni allora il posizionamento avviene in base al corpo del documento.

Esempio position absolute

In questo esempio consideriamo un elemento contenitore a cui daremo un position relative.

Poi creiamo al suo interno tre box di colore diverso e diamo al primo ed al terzo un position absolute.

Ecco di seguito il codice html di esempio:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Position relative esempio</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <div class="container">
      <!-- primo elemento -->
      <div class="box giallo">
        Primo elemento
      </div>
      <!-- /primo elemento -->

      <!-- secondo elemento -->
      <div class="box arancione">
        Secondo elemento
      </div>
      <!-- /secondo elemento -->

      <!-- terzo elemento -->
      <div class="box rosso">
        Terzo elemento
      </div>
      <!-- /terzo elemento -->
    </div>

  </body>
</html>

Quindi creiamo uno foglio di stile per questa pagina web, inserendo delle dimensioni specifiche per i box e dei colori.

Diamo al container principale una larghezza di 250 pixel, un’altezza di 300 pixel ed un bordo solid di colore grigio.

Ad ogni box diamo poi una dimensione di 150 pixel di larghezza e 150 pixel di altezza. Centriamo quindi il testo impostando una line-height uguale all’altezza di ciascun box contenitore.

Dopo al primo ed al terzo elemento diamo il valore position absolute e impostiamo un valore anche per le proprietà left e top.

In particolare il primo elemento lo spostiamo di 120 pixel dall’alto e 20 pixel da sinistra. Mentre il secondo lo sposiamo dal basso di 20 pixel e da sinistra di 50 pixel.

Ecco dunque l’esempio completo che mostra come utilizzare il position absolute e relative:

.container {
  width: 250px;
  height: 300px;
  border: 2px solid lightgrey;
  position: relative;
}

.box {
  width: 150px;
  height: 150px;
  font-size: 20px;
  line-height: 150px;
}

.giallo {
  background-color: yellow;
  position: absolute;
  top:120px;
  left: 20px;
}

.arancione {
  background-color: orange;
}

.rosso {
  background-color: red;
  position: absolute;
  top: 20px;
  left: 50px;
}

Come possiamo notare dall’immagine sotto il primo ed il terzo elemento escono fuori dal flusso della pagina. Il secondo elemento trovando lo spazio libero si posiziona in alto.