Oggi approfondiremo un tema “caldo” per chi studia o si avvicina per la prima volta ai CSS: il posizionamento assoluto. Se volete saperne di più questo articolo fa per voi!
DEMO | DOWNLOAD
– La teoria
Il posizionamento assoluto si basa su un principio molto semplice: “uscire” dal flusso normale dei dati (o elementi). Cosa significa? in parole povere viene usato questo posizionamento quando vogliamo posizionare un elemento qualsiasi (che, per comodita’ di trattazione, da ora in poi sara’ un div) in una posizione dello schermo particolare o comunque fuori dal flusso normale di codice.
Se per esempio abbiamo un main-container centrato di dimensione 960px e vogliamo posizionare un div in alto a destra dello schermo ( e quindi fuori del contenitore principale centrato), dobbiamo per forza usare un posizionamento di tipo assoluto (o fissato, ma questo lo vedremo piu’ avanti).
Se mettessimo il div all’interno del main-container centrato infatti il div non andrebbe in alto a destra del browser, ma si manterrebbe in alto a destra del “div” genitore.
Col posizionamento assoluto si comunica al browser la volonta’ di estrarre dal flusso di elementi il nostro box e metterlo in alto a destra della nostra pagina, indipendentemente da dove sia posizionato il codice del contenitore.
-Esempi pratici
ESEMPIO NESSUN POSIZIONAMENTO ASSOLUTO:
body{
margin:0;
padding:0; /*CENTRO IL DIV CONTAINER*/
text-align:center;
}
#main-container{
margin:0 auto;
padding:0;
width:960px; height:500px; background-color:#360;
}
#box{
width:250px; height:250px; background-color:#CCC;
}
</style>
</head>
<body>
<div id="main-container"><div id="box">CIAO</div></div>
ESEMPIO POSIZIONAMENTO ASSOLUTO:
<style>
body{
margin:0;
padding:0;
text-align:center;
}
#main-container{
margin:0 auto;
padding:0;
width:960px; height:500px; background-color:#360;
}
#box{
width:250px; height:250px; background-color:#CCC; position:absolute; right:0px; top:0px;
}
</style>
</head>
<body>
<div id="main-container"><div id="box">CIAO</div></div>
– Mettiamo insieme le idee
L’utilizzo del codice che vedrete vi sara’ molto utile in molti casi, come ad esempio per posizionare delle news o offerte speciali, magari con un effetto di page peel molto professionale e dal notevole impatto grafico.
Ma piu’ in generale imparerete l’importanza di questo fantastico posizionamento.
Vediamo il codice (commentato) per posizionare il div in alto a destra dello schermo. Il codice si auto-adattera’ a tutte le risoluzioni, grazie al layout “fluido” (vedi i commenti per maggiori informazioni).
– CSS
body{
margin:0;
padding:0;
text-align:center;
background-image:url(images/bg.jpg);
}
#main{
margin:0 auto;
padding:0;
background-color:#FFF;
/*Stile shadow dietro css3*/
-moz-box-shadow: 5px 5px 100px #FFF;
-webkit-box-shadow: 5px 5px 50px #FFF;
box-shadow: 10px 10px 5px #FFF;
/*consiglio sempre di specificare le dimensioni del main*/
width:960px;
height:700px;
}
#alto_dx{
/*Il posizionamento assoluto esula dal flusso di dati del documento, per questo risulta ultile per piazare div (o altro) in modo dinamico*/
position:absolute;
/*Grazie al posizionamento fluid (ovvero con percentuali) il nostro div si adattera' automaticamente allo schermo di tutte le risoluzioni*/
right:0%; top:0%;
/*Dimensioni e background*/
width:200px; height:200px; background-color:#FFF;
/*Bordi arrotondati css3*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.testo_main{ margin:10px; text-align:justify; font-size:14px; font-family:"Arial", Helvetica, sans-serif; font-weight:300;}
– HTML
<body> <div id="alto_dx"> <h1>Div in alto a destra</h1> <p>Mettici quello che vuoi!</p> </div> <div id="main"> <h1>Box a destra ABSOLUTE</h1> <p class="testo_main">Se avessimo usato i px al posto delle percentuali il nostro div si sarebbe spostato ad una risoluzione diversa del monitor.</p> <p class="testo_main">Col posizionamento assoluto si estromette un div dal normale flusso di dati, e pertanto il div può essere piazzato paradossalmente dove si vuole!</p> <p class="testo_main">Nel prossimo articolo studieremo anche gli altri (utili) posizionamenti! fixed e relative! State collegati! Targetweb.it</p> </div> </body>
Leggete i commenti del codice per ulteriori precisazioni.
Potete vedere un ulteriore demo qui. Come vedete se provate a ridimensionare il browser il div si adattera’ alla pagina. Se non avessi usato le percentuali ( e quindi un layout fisso) il box si sarebbe spostato al variare delle varie risoluzioni.La differenza tra layout fisso e fluido, per chi non lo sapesse, e’ l’impiego di px (nel primo) e di percentuali (nel secondo) per le dimensioni e le distanze tra i vari elementi del documento.
Ora che avete le basi potete sperimentare nuovi usi di questo ottimo posizionamento, cross-browser e molto usato. Nel prossimo articolo tratteremo un altro posizionamento, il position:fixed; usato ormai dalla maggior parte dei siti, come ad esempio facebook. A presto!
Ciao…
Pero’ notavo che se la risoluzione cambia i vari div vengono alterati non rimangono nella posizione finale ma si spostano …
per dire se si ottimizza il css e il div per una risoluzione di 1024 x768 tutto ok.. pero’ se ad esempio un utente ha un monitor piu’ grosso o come succede negli apple di schermi di grande dimensioni mi capita che il div non sia piu’ esempio in alto a destra ma magari si accentra verso il centro dello schermo.. forse bisogna dare dei richiami con absolute o cosa !??
Al posto dei px puoi provare a usare le percentuali (es 0px) nel right e top del position absolute.
Ciao!
ah ok…
grazie
quindi esempio se il codice e’ cosi:
position:absolute;
left:680px;
top:44px;
il left e top dovrei mettere tipo 100% e cosi via !??
Bhe se lo vuoi piazzare in alto a destra metti: right: 0%; e top: 0% mentre se lo vuoi mettere in alto a sx cambi solo il codice in: left:0% e top:0%.
Poi i css sono ” un mondo a parte” cioè ogni progetto/problema va affrontato a “step” ovvero a piccoli passi non esistono strade sicure