Posizionamento nei CSS. Proprieta posizion e float nel mirino

Durante codifica di una pagina web molto spesso abiamo bisogno di posizionare varii elementi nel modo nostro sulla pagina. Per fare questo magiormante si utilizzno due principali strumenti (proprieta di elementi )  - posizionamento preciso (position) e libero posizionamento (floating). Posizionamento nei CSS permette di specificare dove apparirà un blocco (sotto nome di un blocco posiamo avere anche un titolo o una immagine  )

 

Posizionamento preciso  e gli elementi flottanti in CSS

video prevui

1. Tipi di posizionamento

La proprietà position consente di impostare con precisione la nuova posizione del blocco rispetto al suo posto dove sarebbe stato nel normale flusso di elementi  nel documento. Per default, tutti gli elementi sono disposti in sequenza uno dopo l'altro nell'ordine in cui sono definite nella struttura del documento html (o ancora questa struttura si chiama DOM). Le proprietà di posizionamento non si ereditano da default a meno che non indicheremo noi di ereditare una o altra proprieta che riguarda posizionamento

position
Valore:  
static Il valore predefinito indica assenza di posizionamento. Gli elementi sono visualizzate in sequenza uno dopo l'altro nell'ordine in cui sono definiti nel documento html.
relative

Un elemento posizionato relativamente viene spostato dal suo solito posto, e lo spazio che occupava, non scompare. Così un elemento del genere può ricoprire l'altro contenuto nella pagina.

Se per posizionamento assoluto indicare nello stesso tempo due valori top e bottom oppure left e right, allora vvera preso in considerazione dal browser solo il primo valore cioè nel primo esempio top e enl secondo — left.

absolute

Un elemento posizionato in modo assoluto viene completamente rimosso dal flusso di documenti ed è posizionato rispetto al suo blocco contenitore (o rispetto altro elemento della finestra del browser). Blocco contenitore per un elemento posizionato in modo assoluto è l'elemento genitore più vicino, il valore della proprietà position del quale non è static.

Posizione di bordo del elemento viene calcolato in base della proprietà di spostamento. Lo spazio, che occupa un tale elemento si dissolve come se esso non esistesse nemmeno sulla pagina. Elementi posizionati assolutamente possono essere ricoperti da altri elementi o loro stessi possono ricoprire altri dipende dal valore z-index). Chiunque elemento posizionato in modo assoluto genera un blocco, cioè, assume il valore display: block;.

fixed Inchioda l'elemento nel posto desiderato sulla pagina. Come blocco contenitore di un elemento con questo valore sara la finestra del browser del utente. L'elemento viene completamente rimosso dal flusso di altri elementi nel documento html.
initial Il valore della proprietà ritorna al valore di default.
inherit Eredita valore dal elemento genitore.

 

position

video prevui

2. Proprietà di spostamento.

Le proprietà che vediamo sotto definiscono spostamento del elemento interesato rispetto elemento contenitore. Vengono indicate per gli elementi con la proprietà position e dove il valore non è static. I valori possono essere sia positivi che negativi. Non si eredita.

Proprieta che gestiscono spostamento di un  elemento : top, right, bottom, left
Valore:  
auto Il valore di default. Il valore è uguale a zero.
lunghezza Spostamento viene specificato in unità di lunghezza.
% I valori percentuali vengono calcolati rispetto all'altezza del blocco contenitore per top e bottom e rispetto la larghezza del blocco contenitore per right e left.
initial Il valore della proprietà ritorna al valore di default.
inherit Eredita valore dal elemento genitore.

Nel caso del valore positivo della proprietà top l'elemento viene spostato verso il basso e nel caso del negativo – verso l'alto  e puo oltrepassare il  bordo superiore del suo blocco contenitore. La stessa cosa vale anche per spostamento left con valori positivi elemento viene spostato verso destra e con quelli negativi verso sinistra oltrepassando il bordo del blocco genitore. Quindi per spostare al interno del blocco genitore si usano valori positivi per spostare oltre i confini del bordo genitore quelli negativi.

3. Posizionare un elemento al interno di un altro elemento (blocco)

Per posizionare un elemento nel posto desiderato al interno di un altro elemento (genitore), per il blocco genitore (genitore per quest altro) dovremo indicare la proprietà position:relative (cosi  sara da referimento diretto per elemento che vogliamo posizionare ) posimo sempre indiare anche per genitore  spostamenti left top o altri. Dopo di che  posiamo posizionare il blocco interno nel posto desiderato indicando per esso position:absolute

video prevui

Markup html

<div class="wrap">
<div class="white">
</div>
</div>

Stili css

.wrap {
padding: 10px;
height: 150px;
position: relative;
background: #e7e6d4;
text-align: right;
border: 3px dashed #645a4e;
}
.white {
position: absolute; 
width: 200px;
top: 10px; 
left: 10px;
padding: 10px;
background: #fff; 
border: 3px dashed #312a22;
}

blocco genitore con posizionamento relativo,
che segue il suo flusso normale sulla pagina
secondo la sua posizione nel codice

scatola con posizionamento assoluto rispetto bloccco contenitore(genitore)

 E importante di indicare position:relative per il blocco genitore altrimenti per  blocco con position:absolute come riferimento nei calcoli del browser sara preso come genitore la finestra del browser del utente o per esseere precisi il tag <body> </body> come genitore principale di tutto quello che vediamo sulla pagina web. Puoi vedere un blocco del genere se ritorni in alto della pagina sulla sinistra.

Sono il blocco dal articolo con position:absolute senza un genitore indicato

 

video prevui

 

4. Problemi di posizionamento

1. Se la larghezza o l'altezza di un elemento posizionato in modo assoluto è impostata su auto, allora larghezza e altezza del blocco saranno  presi dalla larghezza o l'altezza del contenuto di questo elemento. Se invece sono indicati in chiaro sia larghezza sia altezza allora proprio questi valori saranno presi in considerazione dal browser.

2. Se al interno del blocco genitore ci sono blocchi figli con position: absolute  e con la proprietà float allora l'altezza dell'elemento sarà uguale all'altezza del più alto di questi elementi.

3. Ad un elemento con position: absolute non si può indicare proprietà float e invece per un elemento con position:relative si può .

4. Se per elemento che vogliamo posizionare l'elemento genitore è un elemento block allora le sue(del blocco genitore) dimensioni vengono calcolati in base della posizione del bordo(border)del contenuto di esso e se invece il genitore e un elemento inline le sue confini vengono calcolati in base dei limiti esterni del suo contenuto. Se il genitore non è presente, allora come elemento genitore sarà elemento body

5. Spostamento libero di elementi.

In una tipica procedura di visualizzazione d'elementi di blocco, loro iniziano dal bordo superiore della finestra e prosegovo verso il bordo inferiore del browser. La proprietà float consente di spostare qualsiasi elemento, allineandolo al bordo sinistro o destro della pagina web  (in caso che non c'e un blocco genitore che lo contiene diverso da body) o rispetivamente al bordo sinistro o desto del suo elemento contenitore. Allo stesso tempo, altri elementi di blocco lo ignoreranno(per loro esso diventerà invisibile), e gli elementi inline si sposteranno verso destra o verso sinistra, facendogli un posto e posizionandosi intorno ad esso.

 

video prevui

 

Vediamo un esempio

Blocco normale che segue il flusso normale dei ellementi sulla pagina web

Blocco flotante che esce dal flusso normale d'ellementi e libera la sua riga per blocco sucesivo nel nostro caso Blocco2

Blocco2 normale

il nostro codice del esempio

<div style="height:150px; border:1px dashed #E83737">Blocco normale </div>
<div style="height:250px;width:300px; border:3px dashed #3237C9;<strong class="kbd"> float:left</strong>">Blocco flotante,</p> </div>
<div style="height:120px; border:3px solid #23201C; margin-left:301px;">Blocco2 </div>/* ho aggiunto margin-left:301px per liberare lo spazio a sinistra per il blocco flotante che con la aproprieta float:leftnon viene piu preso in considerazione nella costruzione della strutura della pagina*/
<div class="clr"></div>/*ho aggiunt oun div con la classe clr per crerare una iteruzione per elementi che eseguono la nostra costruzione d'esempio*/

Elementi flottanti (con la proprietà float) a differenza dai elementi posizionati(con la proprietà positon:absolute) non possono fuoriuscire dal elemento genitore e se per il blocco contenitore (genitore) sono indicati dei pagging allora l'elemento flottante (figlio con la proprietà float)rispetterà le distanze indicate dal bordo del contenitore genitore.  
La proprietà cambia automaticamente (al momento di visualizzazione nel browser)valori di calcolo per posizionamento della proprietà display in display: block per i seguenti valori:inline, inline-block, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group. valore inline-table in table

La proprietà float non ha alcun effetto sugli elementi con display:flex  e display:inline-flex.

float
Valore:
none Valore predefinito. Inoltre annulla qualsiasi movimento dell'elemento dal gruppo di elementi per le quali inizialmente era impostato float
left L'elemento viene rimosso dal normale flusso di elementi ed è posizionato sul bordo sinistro del blocco contenitore.
right L'elemento viene posizionato sul lato destro del blocco contenitore.
initial Il valore della proprietà ritorna al valore di default.
inherit Eredita il valore della proprietà dal elemento genitore.

Quando si utilizza la proprietà float per elementi di blocco è necessario indicare la loro larghezza. Così, il browser creerà lo spazio per altri elementi. Ma se la larghezza complessiva di tutte gli elementi che vogliamo posizionare nella stessa riga risulterà superiore allo spazio disponibile, l'ultimo elemento vera spostato in basso (nella riga successiva ).

In questo caso margine in verticale (margin)dei elementi flottanti non vengono sovrapposti come succede con elementi di blocco nelle situazioni normali.

6. Annullamento scorrimento d'elementi

6.1. La proprietà clear

La proprietà clear  specifica come posizionare elemento successivo che segue un elemento flottante. La proprietà annulla lo scorrimento su entrambi i lati oppure su un lato solo del elemento con la proprietà float. Per impedire la visualizzazione di sfondo o del bordo del elemento flotante si utilizza la costruzione {overflow: hidden;}(nascondere tutto quanto che esce fuori altezza prestabilita).

clear
Valore:
left Annulla scorrimento sul lato sinistro, spostando l'elemento in giù. Scorrimento sulla destra rimane in vigore.
right Annulla scorrimento sul lato destro, spostando l'elemento in giù. Scorrimento sulla sinistra rimane in vigore.
both Annulla scorrimento su entrambi i lati dell'elemento, spostando l'elemnto che segue verso il basso.
none Il valore di default. Inoltre annulla annullamento dello scorrimento per un elemento dal gruppo dove è indicato.
initial Il valore della proprietà ritorna al valore di default.
inherit Eredita il valore della proprietà dal elemento genitore.

6.2. Pulizia del flusso di elementi con utilizzando classe clearfix e pseudoclasse :after

Supponiamo che abbiamo un blocco contenitore per il quale non sono specificati la larghezza e l'altezza. E al suo interno abbiamo messo un blocco flottante. 

Markup HTML

<div class="container">
    <div class="floatbox">
    </div>
</div>

Stili CSS

.container {
padding: 1em;
background: #e7e6d4;
border: 3px dashed #645a4e;
}
.floatbox {
float: left;
width: 300px;
height: 150px;
margin-right: 1em;
padding: 0 1em;
background: #fff;
border: 3px dashed #666666;
}

dis4

Soluzione:
Creare classe .clearfix e in combinato con la pseudoclasse :after usare per il blocco contenitore.

Markup html.

<div class="container clearfix">
<div class="floatbox">
</div>
</div>

Stili CSS
.container {
padding: 1em;
background: #e7e6d4;
border: 3px dashed #645a4e;
}
.floatbox {
float: left;
width: 300px;
height: 150px;
margin-right: 1em;
padding: 0 1em;
background: #fff;
border: 3px dashed #666666;
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

float2

6.3. Un modo semplice per ripulire la struttura.

Esiste ancora un metodo per gestire  un elemento che contiene elementi flottanti per esempio in caso di una lista non numerata:

ul {
overflow: auto;
height: 1%;
}
li {
float: left;
}

ul overflow

 
Letto 843 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso