Podem fer servir altres tipus de posicionament:<\/p>\n\n\n\n
- \n
- Absolute<\/li>\n\n\n\n
- Fixed<\/li>\n\n\n\n
- Sticky<\/li>\n<\/ul>\n\n\n\n
Els elements amb una posici\u00f3 absolute<\/em><\/strong> es col\u00b7loquen per sobre d’altres elements, trepitjant-los. Les coordenades de la seva posici\u00f3 es poden donar respecte a l’esquerra (left), respecte a la dreta (right), respecte a la part superior (top) o respecte a la part inferior (bottom). Caldr\u00e0, per\u00f2, tenir clar quin \u00e9s el marc de refer\u00e8ncia, quan posicionem un element.<\/p>\n\n\n\n
Per defecte, el marc de refer\u00e8ncia ser\u00e0 l’element body<\/em>. \u00c9s a dir, que si posicionem un element de manera absoluta es col\u00b7locar\u00e0 a la part superior esquerra del body (o a la dist\u00e0ncia de la part superior, esquerra, dreta o inferior que li assignem)<\/p>\n\n\n\n
Si volem posicionar-l’ho respecte a un altre element, aleshores caldr\u00e0 que aquest altre element sigui contenidor d’all\u00f2 que volem posicionar (o contenidor del contenidor, o contenidor del contenidor del contenidor etc) i que tingui la posici\u00f3 relativa (relative) o absoluta (absolute).<\/p>\n\n\n\n
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/imagen-1.png\")
El text i el bot\u00f3 \u00abnext\u00bb estan col\u00b7locats per sobre de la imatge, perque tenen una posici\u00f3 absolute<\/em>. L’element contenidor de imatge, text i bot\u00f3 t\u00e9 una posici\u00f3 relative<\/em>.<\/figcaption><\/figure>\n\n\n\n Quan fem scroll, l’element posicionat de manera absoluta es mour\u00e0 quan es mogui el seu element de refer\u00e8ncia.<\/p>\n\n\n\n
Els elements amb posici\u00f3 fixa (fixed<\/em><\/strong>) estan enganxats a la finestra, com si s’haguessin quedat enganxats al vidre de la pantalla. Les coordenades que podem fer servir per posicionar-los s\u00f3n les mateixes (top, bottom, left <\/em>o right<\/em>) per\u00f2 el marc de refer\u00e8ncia sera sempre la pantalla, no el body o cal altre element.<\/p>\n\n\n\n
![\"popup\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/imagen-1024x620.png\")
Els popups<\/em> i els avisos de cookies<\/em> acostumen a fer servir posicions del tipus \u00abfixed\u00bb<\/figcaption><\/figure>\n\n\n\n Els elements amb posici\u00f3 sticky<\/em><\/strong> (enganxosa) tenen una posici\u00f3 static<\/em> fins que el seu contenidor toca els l\u00edmits de la pantalla, moment en el que es comporten com si fossin del tipus fixed.<\/p>\n\n\n\n
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/imagen-2-1024x586.png\")
la franja que permet afegir al carro el producte t\u00e9 una posici\u00f3 del tipus \u00absticky\u00bb<\/figcaption><\/figure>\n\n\n\n ![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/imagen-3-1024x590.png\")
quan fem scroll fins all\u00e0 on hi ha la franja d’afegir al carro, aquesta queda posicionada de forma fixe.<\/figcaption><\/figure>\n\n\n\n A qualsevol p\u00e0gina web trobar\u00e0s un o varis tipus de posicionament. A classe hem buscat p\u00e0gines web a siteinspire.net que fessin servir els 3 tipus de posicionament. Les imatges de l’exemple corresponen a la web https:\/\/www.sofiepavittface.com\/<\/a><\/p>\n\n\n\n
L’eix Z<\/h2>\n\n\n\n
Ja hem vist que podem moure un element en l’eix X (horitzontal) i Y (vertical). Tamb\u00e9 podem moure un element en l’eix Z (endavant – endarrera).<\/p>\n\n\n\n
El navegador assigna un index en l’eix Z a cada element (propietat z-index<\/em><\/strong>). Els elements que apareixen abans a l’HTML tenen un valor de z-index m\u00e9s baix que els que apareixen m\u00e9s tard. Els elements amb un z-index m\u00e9s gran (ex: 9999) es veuran per sobre d’elements amb un z-index m\u00e9s petit. Amb CSS podem assignar un valor diferent del que li correspon a un element i fer que es mostri o s’amagui darrera d’altres elements. Una pr\u00e0ctica habitual \u00e9s donar un valor gegant a les cap\u00e7aleres que tenen una posici\u00f3 fixe, tipus 9999.<\/p>\n\n\n\n
header{
position:absolute;
top:0; left:0;
z-index: 9999;
}<\/code><\/pre>\n\n\n\nUn altre \u00fas de la propietat position:relative..<\/h2>\n\n\n\n
Donar posici\u00f3 relativa a un element tamb\u00e9 ens permetr\u00e0 moure aquest element fent servir els valors top, right, bottom o left. Si volem despla\u00e7ar un element respecte al punt que t\u00e9 assignat per defecte, haurem de donar-li posici\u00f3 relativa (relative) abans d’assignar un valor a top, right, bottom o left. Un element de tipus static<\/em> no deixar\u00e0 la seva posici\u00f3 ni amb aiguar\u00e0s, que en diuen a Val\u00e8ncia \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
Una de les coses que podem fer amb CSS \u00e9s modificar el posicionament dels elements de l’HTML. Per defecte, el navegador considera que tots els elements tenen una posici\u00f3 del tipus static. Static significa que es visualitzaran on els toqui (darrera l’element anterior, abans del seg\u00fcent element) i alineats per defecte a l’esquerra. Quan fem… Continueu llegint Posicionament d’una caixa<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":54,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-90","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":3,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/90\/revisions\/105"}],"up":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/54"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}