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 {{cssxref("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. |
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;
}
{{ EmbedLiveSample('Document_flow', '100%', 500) }}
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.
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 {{cssxref("position")}}.
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 {{htmlelement("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).
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 {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} , Que explicarem en la següent secció.
{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} s'utilitzen juntament amb {{cssxref("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:
<h1>Relative positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> <p class="positioned">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 <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;
}
.positioned {
position: relative;
background: yellow;
top: 30px;
left: 30px;
}
{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}
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).
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:
<h1>Absolute positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> <p class="positioned">Now I'm absolutely positioned, I'm not playing by the rules any more!</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 <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;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}
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 {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("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 {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("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).
Quin element és el "element que conté" un element absolutament posicionat? Per defecte, és l'element {{htmlelement("html")}} - l'element posicionat està niat dins del {{htmlelement("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 {{htmlelement("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:
<h1>Positioning context</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> <p class="positioned">Now I'm absolutely positioned relative to the <code><body></code> element, not the <code><html></code> element!</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 <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;
position: relative;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}
L'element posicionat ara es troba en relació amb l'element {{htmlelement("body")}}.
Nota: Podeu veure l'exemple en aquest moment en directe a 4_positioning-context.html (vegeu el codi font).
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 {{cssxref("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 {{cssxref("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:
<h1>z-index</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> <p class="positioned">Now I'm absolutely positioned relative to the <code><body></code> element, not the <code><html></code> element!</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 <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;
position: relative;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
p:nth-of-type(1) {
position: absolute;
background: lime;
top: 10px;
right: 30px;
z-index: 1;
}
{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}
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).
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 {{htmlelement("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 {{htmlelement("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:
<h1>Fixed positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> <p class="positioned">I'm not positioned any more...</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 <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;
height: 1400px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin: 0 auto;
background: white;
padding: 10px;
}
p:nth-of-type(1) {
margin-top: 60px;
}
{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}
Nota: Podeu veure l'exemple en aquest moment en directe a 6_fixed-positioning.html (vegeu el codi font).
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.
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.
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}