Posicionament

El posicionament permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseient-se un damunt de l'altre o mantenint-se sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de position, i com utilitzar-los.

Requisits previs: Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu: Aprendre com funciona el posicionament CSS.

Flux del document

El posicionament és un tema bastant complex, per tant, abans de submergir-nos en el codi, anem a revisar i ampliar una mica de teoria de disseny per donar-nos una idea de com funciona això.

En primer lloc, les caixes d'elements individuals es defineixen tenint en compte el contingut dels elements, afegint-hi qualsevol farciment, vora i marge al voltant d'ells - √©s a dir, aquell model de caixa nou, que vam mirar abans. Per defecte, el contingut d'un element de nivell de bloc √©s del 100% de l'ample de l'element pare i tan alt com el seu contingut. Els elements en l√≠nia s√≥n tan alts  i tan amples com el seu contingut. No es pot definir l'ample o al√ßada en elements en l√≠nia - simplement s'assenten dins del contingut dels elements de nivell de bloc. Si es vol controlar la mida d'un element en l√≠nia d'aquesta manera, s'ha d'establir perqu√® es comporti com un element de nivell de bloc amb display: block;.

Aix√≤ explica els elements individuals, per√≤ qu√® passa amb els elements que interactuen els uns amb els altres? El flux de disseny normal (esmentat en l'article de presentaci√≥ de disseny) √©s el sistema mitjan√ßant el qual es col¬∑loquen els elements dins de la finestra de visualitzaci√≥ del navegador. De manera predeterminada, els elements de nivell de bloc es distribueixen verticalment a la finestra de visualitzaci√≥: cadascun d'ells apareixer√† en una nova l√≠nia,per sota d l'√ļltima i se separaran per qualsevol marge que s'estableixi en ells.

Els elements en línia es comporten de manera diferent - no apareixen en noves línies; en canvi, s'assenten en la mateixa línia que els altres i amb qualsevol contingut de text adjacent (o embolicat), sempre que hi hagi espai perquè ho facin dins de l'amplada de l'element a nivell de bloc pare. Si no hi ha espai, el text desbordat o els elements es desplacen cap a una nova línia.

Si dos elements adjacents tenen un marge establert i els dos marges es toquen, el més gran dels dos es queda i el més petit desapareix - això es diu col.lapsació del marge, i també ho hem conegut abans.

Vegem un exemple senzill que expliqui tot això:

<h1>Basic document flow</h1>

<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>

<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

Revisarem aquest exemple diverses vegades al llarg d'aquest article, ja que mostrarem els efectes de les diferents opcions de posicionament disponibles per a nosaltres.

Ens agradaria que seguíssiu els exercicis en el vostre ordinador, si és possible - agafeu una còpia de 0_basic-flow.html del nostre repositori de Github (codi font aquí) i utilitzeu-lo com a punt de partida.

Introducció al posicionament

Tota la idea del posicionament és permetre'ns anul·lar el comportament bàsic del flux de documents descrit anteriorment, per produir efectes interessants. Què passa si voleu canviar lleugerament la posició d'algunes caixes dins d'un disseny des de la seva posició de flux de disseny per defecte, per donar-li un toc lleugerament peculiar i molest? El posicionament és la vostra eina. O si voleu crear un element d'interfície d'usuari que floti a la part superior d'altres parts de la pàgina i/o sempre es trobi al mateix lloc dins de la finestra del navegador, sense importar quant es desplaça la pàgina? El posicionament fa possible aquest treball de disseny.

Hi ha una sèrie de diferents tipus de posicionament que podeu implementar en elements HTML. Per fer un tipus específic de posicionament actiu en un element, utilitzem la propietat position.

Posicionament estàtic (Static)

El posicionament estàtic és el valor predeterminat que cada element obté - significa "posar l'element en la seva posició normal en el flux del disseny del document - res especial per veure aquí".

Per demostrar això i preparar el vostre exemple per a futures seccions, primer afegiu una class de positioned al segon <p> en l'HTML:

<p class="positioned"> ... </p>

Ara afegiu la seg√ľent regla a la part inferior del vostre CSS:

.positioned {
   position: static;
  background: yellow;
}

Si ara deseu i actualitzeu, no veureu cap diferència en absolut, excepte el color de fons actualitzat del segon paràgraf. Està bé - com hem dit abans, el posicionament estàtic és el comportament predeterminat!

Nota: Podeu veure l'exemple en aquest moment en directe a 1_static-positioning.html (vegeu el codi font).

Posicionament relatiu (Relative)

El posicionament relatiu és el primer tipus de posició que veurem. Això és molt semblant al posicionament estàtic, tret que una vegada que l'element posicionat ha tingut el seu lloc en el flux de disseny normal, podeu modificar la seva posició final, incloent-hi la superposició d'altres elements a la pàgina. Seguiu i actualitzeu la declaració de posició del vostre codi:

position: relative;

Si deseu i actualitzeu en aquesta etapa, no veureu cap canvi en el resultat en absolut, aix√≠, com modifiqem la posici√≥ de l'element? Heu d'utilitzar les propietats top, bottom, left i right , Que explicarem en la seg√ľent secci√≥.

Introduir top, bottom, left i right

top, bottom, left, and right s'utilitzen juntament amb position per especificar exactament a on moure l'element posicionat. Per provar-ho, afegiu les seg√ľents declaracions a la regla .positioned al vostre CSS:

top: 30px;
left: 30px;

Nota: Els valors d'aquestes propietats pot prendre totes les unitats que s'esperaria lògicament - píxels, mm, rems,%, etc.

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

Genial, eh? D'acord, aixó es probablement el que no esperaves: per què s'ha mogut a la part inferior i la dreta si s'especificat a dalt i a l'esquerra? Pot sonar Il·lògic inicialment, però aquesta és la forma en què funciona el posicionament relatiu: cal pensar en una força invisible que empeny el costat de la caixa posicionada, movent-la en la direcció oposada. Així, per exemple, si especifiqueu un top: 30px;, una força empeny la part superior de la caixa, fent que es mogui cap avall en 30px.

Nota: Podeu veure l'exemple en aquest moment en directe a 2_relative-positioning.html (vegeu el codi font).

Posicionament absolut (Absolute)

El posicionament absolut porta resultats molt diferents. Intenteu canviar la declaraci√≥ de posici√≥ del vostre de la manera seg√ľent:

position: absolute;

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

En primer lloc, tingueu en compte que el buit on l'element posicionat hauria d'estar en el flux del document ja no hi √©s - el primer i el tercer element s'han tancat junts, com que ja no existeix!. B√©, en certa manera, aix√≤ √©s cert. Un element absolutament posicionat ja no existeix en el flux de disseny normal del document. En lloc d'aix√≤, s'asseu a la seva pr√≤pia capa separada de tota la resta. Aix√≤ √©s molt √ļtil - vol dir que podem crear funcions d'interf√≠cie d'usuari a√Įllades que no interfereixin amb la posici√≥ d'altres elements de la p√†gina - per exemple, les caixes d'informaci√≥ emergents i els men√ļs de control, els panells de rollover, les funcions d'interf√≠cie d'usuari que es poden arrossegar i deixar anar a qualsevol lloc en la p√†gina, i aix√≠ successivament.

En segon lloc, observeu que la posició de l'element ha canviat - això es deu al fet que top, bottom, left i right es comporten d'una manera diferent amb el posicionament absolut. En lloc d'especificar la direcció en què l'element s'ha de moure, especifiquen la distància que ha de tenir l'element en cada costat dels elements que contingui. Així que, en aquest cas, estem dient que l'element absolutament posicionat hauria de situar-se 30px des de la part superior del "element que conté" i 30px des de l'esquerra.

Nota: Podeu utilitzar top, bottom, left i right per canviar la mida dels elements si és necessari. Intenteu establir top: 0; bottom: 0; left: 0; right: 0; and margin: 0; en els elements posicionats i veureu què passa! Torneu a posar-ho de nou després...

Nota: S√≠, els marges encara afecten els elements posicionats. Tanmateix, el col¬∑lapse de marges no existeix.

Nota: Podeu veure l'exemple en aquest moment en directe a 3_absolute-positioning.html (vegeu el codi font).

Contextos de posicionament

Quin element és el "element que conté" un element absolutament posicionat? Per defecte, és l'element <html> - l'element posicionat està niat dins del <body> en la font HTML, però en el disseny final, es troba a 30px de distància des de la part superior i esquerra de la vora de la pàgina, que és l'element <html>. Això s'anomena més exactament com a context de posicionament de l'element.

Podem canviar el context de posicionament - quin element posiciona l'element absolutament posicionat en relaci√≥ a. Aix√≤ es fa establint el posicionament en un dels altres avantpassats del element - un dels elements que est√† niat a l'interior (no es pot col¬∑locar en relaci√≥ amb un element que no est√† niat a l'interior). Per demostrar-ho, afegiu la seg√ľent declaraci√≥ a la regla del cos:

position: relative;

Aix√≤ hauria de donar el seg√ľent resultat:

L'element posicionat ara es troba en relació amb l'element <body>.

Nota: Podeu veure l'exemple en aquest moment en directe a 4_positioning-context.html (vegeu el codi font).

Introducció a z-index

Tot aquest posicionament absolut és una bona diversió, però hi ha una altra cosa que encara no hem considerat - quan els elements comencen a superposar-se, què determina que uns elements apareguin sobre quins altres elements? En l'exemple que hem vist fins ara, només tenim un element posicionat en el context de posicionament, i apareix a la part superior, ja que els elements posicionats guanyen elements no posicionats. Què passa quan tenim més d'un?

Intenteu afegir el seg√ľent, al vostre CSS, perqu√® el primer par√†graf estigui absolutament posicionat tamb√©:

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}

En aquest punt, veureu el primer paràgraf de color verd, desplaçat del flux del document i colocat una mica per sobre d'on era originalment. També s'apil·la a sota del paràgraf original .positioned, on els dos es superposen. Això és degut a que el paràgraf .positioned és el segon paràgraf de l'ordre d'origen, i els elements posicionats més endavant en l'ordre d'origen guanyen sobre els elements posicionats anteriorment en l'ordre d'origen.

Es pot canviar l'ordre d'apilament? Sí, podeu fer-ho, utilitzant la propietat z-index. "z-index" és una referència a l'eix z. Recordareu que en punts anteriors, en la font, parlàvem de la utilització en pàgines web de coordenades horitzontals (eixos x) i verticals (eixos-y) per tal de determinar el posicionament de coses com ara imatges de fons i desplaçaments d'ombra. (0,0) es troba a la part superior esquerra de la pàgina (o element), i els eixos x i y es desplaçan cap a la dreta i avall de la pàgina (per als idiomes d'esquerra a dreta, de totes maneres).

Les pàgines web també tenen un eix z - una línia imaginària que s'estén des de la superfície de la pantalla, cap a la nostra cara (o el que vulgueu tenir davant de la pantalla). Els valors de z-index afecten on els elements posicionats se situen en aquest eix; els valors positius els mouen més amunt per la pila, i els valors negatius els mouen més avall a la pila. De manera predeterminada, els elements posicionats tenen un z-index d'auto, que és efectivament 0.

Per canviar l'ordre d'apilament, proveu d'afegir la seg√ľent declaraci√≥ a la vostra regla p:nth-of-type(1):

z-index: 1;

Ara hauríeu de veure l'exemple acabat:

Tingueu en compte que z-index nom√©s accepta valors d'√≠ndex, sense unitat; No podeu especificar que desitgeu que un element tingui 23 p√≠xels a dalt de l'eix Z - no funciona aix√≠. Els valors m√©s alts van per sobre dels valors inferiors, i dep√®n de vosaltres quins valors utilitzar. L'√ļs de 2 i 3 donaria el mateix efecte que 300 i 40000.

Tingueu en compte que aqu√≠ nom√©s hem tractat un √ļnic context de posicionament. Si tingu√©ssiu dos conjunts separats d'elements posicionats a la mateixa p√†gina, i volgu√©ssiu que es  superposessin i que l'ordre d'apilament funcion√©s d'una manera espec√≠fica, les coses es complicarien. Afortunadament, molt poques vegades trobareu tal complexitat amb z-index. Si voleu llegir amb molt m√©s detall sobre com funciona exactament z-index, consulteu la Web Standards Curriculum z-index writeup. En aquest article us hem proporcionat tot el que necessiteu saber en aquesta etapa del vostre aprenentatge.

Note: Podeu veure l'exemple en aquest moment en directe a 5_z-index.html (vegeu el codi font).

Posicionament Fixa (Fixed)

Hi ha un altre tipus de posicionament a cobrir - fixed. Aix√≤ funciona exactament igual que el posicionament absolut, amb una difer√®ncia clau - mentre que el posicionament absolut fixa un element en el lloc en relaci√≥ amb l'element <html> o seu m√©s proper avantpassat posicionat, el posicionament fix fixa un element en el lloc en relaci√≥ a la finestra de visualitzaci√≥ del navegador. Aix√≤ vol dir que podeu crear elements √ļtils de la interf√≠cie d'usuari que es fixen en el lloc, com ara men√ļs de navegaci√≥ persistents.

Fem un exemple senzill per mostrar el que volem dir. Abans de res, elimineu les regles existents p:nth-of-type(1) i .positioned del vostre CSS.

Ara, actualitzeu la regla del cos per eliminar la declaració position: relative; i afegiu una alçada fixa, com aixó:

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

Ara donarem a l'element <h1> position: fixed;, i aconseguirem que s'assegui en el centre superior de la finestra de visualitzaci√≥. Afegiu la regla seg√ľent al vostre CSS:

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}

El top: 0; és necesari per fer que s'adhereixi a la part superior de la pantalla; Donem a l'encapçalament el mateix ample que la columna de contingut i utilitzarem el fidel antic margin: 0 auto; com a truc per centrar-ho. A continuació, li donem un fons blanc i algun farcit, de manera que el contingut no estigui visible per sota d'ell.

Si deseu i actualitzeu ara, veureu un petit efecte divertit pel qual l'encapçalament es manté fix, i el contingut apareix en desplaçar-se cap amunt i desaparèixer per sota d'ell. Però podríem millorar més, això - de moment, alguns dels continguts començan per sota de l'encapçalament, perquè el encapçalament posicionat ja no apareix en el flux del document, de manera que la resta del contingut es mou cap amunt. Necessitem moure-ho tot cap avall una mica; podem fer-ho establint un marge superior al primer paràgraf. Afegiu-ho ara:

p:nth-of-type(1) {
  margin-top: 60px;
}

Ara hauríeu de veure l'exemple acabat:

Nota: Podeu veure l'exemple en aquest moment en directe a 6_fixed-positioning.html (vegeu el codi font).

Experimental: posició adherent (sticky)

Hi ha un nou valor de posicionament disponible anomenat position: sticky, el suport del mateix no est√† molt est√®s. Aquest √©s b√†sicament un h√≠brid entre una posici√≥ relativa i una fixa, que permet que un element posicionat actu√Į com si estigu√©s relativament posicionat fins que es desplaci a un determinat llindar (per ex., 10px des de la part superior de la finestra de visualitzaci√≥), i despr√©s es torna fix.  Vegeu la nostra entrada de refer√©ncia de position: sticky per m√©s detalls i un exemple.

Resum

Estic segur que us heu divertir jugant amb el posicionament b√†sic - √©s una de les eines essencials que est√† darrera en le creaci√≥ de complexos dissenys CSS i funcions d'interf√≠cie d'usuari. Tenint en compte aix√≤, en el proper article tindrem encara m√©s diversi√≥ amb el posicionament, all√† anirem un pas m√©s enll√† i comen√ßarem a construir algunes coses √ļtils del m√≥n real amb ell.