path: root/files/ca/learn/css/disseny_css/posicionament/index.html

---
title: Posicionament
slug: Learn/CSS/Disseny_CSS/Posicionament
tags:
  - Article
  - Beginner
  - CSS
  - CodingScripting
  - Guide
  - Layout
  - Positioning
  - absolute
  - fixed
  - relative
translation_of: Learn/CSS/CSS_layout/Positioning
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</div>

<p class="summary">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.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Requisits previs:</th>
   <td><span id="result_box" lang="ca"><span>Conceptes bàsics d'HTML</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca"><span>i una idea de com funciona CSS</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>Aprendre com funciona el posicionament CSS.</td>
  </tr>
 </tbody>
</table>

<h2 id="Flux_del_document"><span id="result_box" lang="ca"><span>Flux del document</span></span></h2>

<p>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ò.</p>

<p>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 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">model de caixa</a> 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 <code>display: block;</code>.</p>

<p>Això explica els elements individuals, però què passa amb els elements que interactuen els uns amb els altres? El <strong>flux de disseny normal</strong> (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.</p>

<p>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.</p>

<p>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 <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">col.lapsació del marge</a>, i també ho hem conegut abans.</p>

<p>Vegem un exemple senzill que expliqui tot això:</p>

<pre class="brush: html">&lt;h1&gt;Basic document flow&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

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

<pre class="brush: css">body {
  width: 500px;
  margin: 0 auto;
}

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

span {
  background: red;
  border: 1px solid black;
}</pre>

<p>{{ EmbedLiveSample('Document_flow', '100%', 500) }}</p>

<p>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.</p>

<p>Ens agradaria que seguíssiu els exercicis en el vostre ordinador, si és possible - agafeu una còpia de <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> del nostre repositori de Github (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">codi font aquí</a>) i utilitzeu-lo com a punt de partida.</p>

<h2 id="Introducció_al_posicionament">Introducció al posicionament</h2>

<p>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.</p>

<p>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")}}.</p>

<h3 id="Posicionament_estàtic_(Static)"><span id="result_box" lang="ca"><span>Posicionament estàtic</span></span> (Static)</h3>

<p>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í".</p>

<p>Per demostrar això i preparar el vostre exemple per a futures seccions, primer afegiu una <code>class</code> de <code>positioned</code> al segon {{htmlelement("p")}} en l'HTML:</p>

<pre class="brush: html">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>

<p><span id="result_box" lang="ca"><span>Ara afegiu la següent regla a la part inferior del vostre CSS:</span></span></p>

<pre class="brush: css">.positioned {
   position: static;
  background: yellow;
}</pre>

<p>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!</p>

<div class="note">
<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">vegeu el codi font</a>).</p>
</div>

<h3 id="Posicionament_relatiu_(Relative)">Posicionament relatiu (Relative)</h3>

<p>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:</p>

<pre class="brush: css">position: relative;</pre>

<p>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ó.</p>

<h3 id="Introduir_top_bottom_left_i_right">Introduir top, bottom, left i right</h3>

<p>{{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 <code>.positioned</code> al vostre CSS:</p>

<pre>top: 30px;
left: 30px;</pre>

<div class="note">
<p><strong>Nota</strong>:<span id="ouHighlight__0_2TO0_2"> Els</span><span id="noHighlight_0.1974495154842031"> </span><span id="ouHighlight__4_9TO4_9">valors</span><span id="noHighlight_0.85891676862169"> </span><span class="highlighted" id="ouHighlight__14_18TO11_20">d'aquestes</span><span id="noHighlight_0.11330426706729768"> </span><span id="ouHighlight__20_29TO22_31">propietats</span><span id="noHighlight_0.18392821958485306"> </span><span id="ouHighlight__31_33TO33_35">pot</span><span id="noHighlight_0.9676838165776446"> </span><span id="ouHighlight__35_38TO37_43">prendre</span><span id="noHighlight_0.037568817284082345"> </span><span id="ouHighlight__40_42TO45_49">totes</span><span id="noHighlight_0.9017348693534137"> les </span><span id="ouHighlight__44_48TO55_61">unitats</span><span id="noHighlight_0.831725614209524"> que </span><span id="ouHighlight__66_71TO67_77">s'esperaria</span><span id="noHighlight_0.2590131286870444"> </span><span id="ouHighlight__56_64TO79_88">lògicament</span> - píxels, mm, rems,%, etc.</p>
</div>

<p>Si ara deseu i actualitzeu, obtindreu un resultat com aquest:</p>

<div class="hidden">
<pre class="brush: html">&lt;h1&gt;Relative positioning&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;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.&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css">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;
}</pre>
</div>

<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p>

<p>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 <code>top: 30px;</code>, una força empeny la part superior de la caixa, fent que es mogui cap avall en 30px.</p>

<div class="note">
<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">vegeu el codi font</a>).</p>
</div>

<h3 id="Posicionament_absolut_(Absolute)"><span id="result_box" lang="ca"><span>Posicionament absolut (</span></span>Absolute)</h3>

<p>El posicionament absolut porta resultats molt diferents. Intenteu canviar la declaració de posició del vostre de la manera següent:</p>

<pre>position: absolute;</pre>

<p>Si ara deseu i actualitzeu, obtindreu un resultat com aquest:</p>

<div class="hidden">
<pre class="brush: html">&lt;h1&gt;Absolute positioning&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;Now I'm absolutely positioned, I'm not playing by the rules any more!&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css">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;
}</pre>
</div>

<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p>

<p>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.</p>

<p>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.</p>

<div class="note">
<p><strong>Nota</strong>: Podeu utilitzar {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} per canviar la mida dels elements si és necessari. Intenteu establir <code>top: 0; bottom: 0; left: 0; right: 0;</code> and <code>margin: 0;</code> en els elements posicionats i veureu què passa! Torneu a posar-ho de nou després...</p>
</div>

<div class="note">
<p><strong>Nota</strong>: Sí, els marges encara afecten els elements posicionats. Tanmateix, el col·lapse de marges no existeix.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">vegeu el codi font</a>).</p>
</div>

<h3 id="Contextos_de_posicionament"><span id="result_box" lang="ca"><span>Contextos de posicionament</span></span></h3>

<p>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 <strong>context de posicionament</strong> de l'element.</p>

<p>Podem canviar el <strong>context de posicionament</strong> - 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:</p>

<pre>position: relative;</pre>

<p><span class="short_text" id="result_box" lang="ca"><span>Això hauria de donar el següent resultat:</span></span></p>

<div class="hidden">
<pre class="brush: html">&lt;h1&gt;Positioning context&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css">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;
}</pre>
</div>

<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p>

<p>L'element posicionat ara es troba en relació amb l'element {{htmlelement("body")}}.</p>

<div class="note">
<p><strong>Nota:</strong> Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">vegeu el codi font</a>).</p>
</div>

<h3 id="Introducció_a_z-index">Introducció a z-index</h3>

<p>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?</p>

<p>Intenteu afegir el següent, al vostre CSS, perquè el primer paràgraf estigui absolutament posicionat també:</p>

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

<p>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 <code>.positioned</code> é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.</p>

<p>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).</p>

<p>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.</p>

<p>Per canviar l'ordre d'apilament, proveu d'afegir la següent declaració a la vostra regla <code>p:nth-of-type(1)</code>:</p>

<pre>z-index: 1;</pre>

<p><span class="short_text" id="result_box" lang="ca"><span>Ara hauríeu de veure l'exemple acabat:</span></span></p>

<div class="hidden">
<pre class="brush: html">&lt;h1&gt;z-index&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css">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;
}
</pre>
</div>

<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p>

<p>Tingueu en compte que <code>z-index</code> 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.</p>

<p>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 <a href="https://www.w3.org/community/webed/wiki/CSS_absolute_and_fixed_positioning#The_third_dimension.E2.80.94z-index">Web Standards Curriculum z-index writeup</a>. En aquest article us hem proporcionat tot el que necessiteu saber en aquesta etapa del vostre aprenentatge.</p>

<div class="note">
<p><strong>Note</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">vegeu el codi font</a>).</p>
</div>

<h3 id="Posicionament_Fixa_(Fixed)"><span id="result_box" lang="ca"><span>Posicionament Fixa (</span></span>Fixed)</h3>

<p>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.</p>

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

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

<pre>body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}</pre>

<p>Ara donarem a l'element {{htmlelement("h1")}} <code>position: fixed;</code>, i aconseguirem que s'assegui en el centre superior de la finestra de visualització. Afegiu la regla següent al vostre CSS:</p>

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

<p>El <code>top: 0;</code> é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 <code>margin: 0 auto;</code> 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.</p>

<p>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>

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

<p><span class="short_text" id="result_box" lang="ca"><span>Ara hauríeu de veure l'exemple acabat:</span></span></p>

<div class="hidden">
<pre class="brush: html">&lt;h1&gt;Fixed positioning&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;I'm not positioned any more...&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css">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;
}</pre>

<p> </p>
</div>

<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p>

<div class="note">
<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">vegeu el codi font</a>).</p>
</div>

<h3 id="Experimental_posició_adherent_(sticky)">Experimental: posició adherent (sticky)</h3>

<p>Hi ha un nou valor de posicionament disponible anomenat <code>position: sticky</code>, 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 <a href="/en-US/docs/Web/CSS/position#Sticky_positioning">entrada de referéncia de position: sticky</a> per més detalls i un exemple.</p>

<h2 id="Resum">Resum</h2>

<p>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.</p>

<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p>