Guia pràctica sobre l'ús de la posició CSS ​​relativa i absoluta

Bloc

Guia pràctica sobre l'ús de la posició CSS ​​relativa i absoluta

En aquest article, aprendreu a utilitzar la posició CSS: relativa i posició: absoluta mitjançant una gran quantitat de demostracions i ajuts didàctics.

CSS position de vegades es considera un tema avançat perquè pot fer coses una mica inesperades. Bé, no deixeu que els experts us intimidin de buscar l’excel·lència en la vostra competència en CSS. És un tema molt accessible quan estigueu equipat amb algunes de les idees subjacents.

Render de flux

Un concepte important per entendre el posicionament relatiu / absolut és el flux de renderització.

posar divs un al costat de l’altre

La idea general és que tots els elements HTML ocupen una mica d’espai. El motor de renderització del vostre navegador sempre ho fa tot de forma quadrícula, començant per l’angle superior esquerre i movent-se successivament cap a la part inferior dreta fins que hagi acabat de col·locar tot el vostre contingut HTML.

Si alguna vegada heu tingut una connexió a Internet lenta i heu vist que les coses grans de la pàgina web empenyen tot cap a la dreta i cap avall, és essencialment fer que el flux flueixi en acció.

Podeu canviar aquest comportament predeterminat mitjançant CSS position.

Posició CSS

CSS position de vegades es considera una habilitat avançada perquè no és tan intuïtiu com font-size o margin, etc., ja que canvia el flux de renderització natural del navegador.

Aquests són els possibles valors per a CSS position:

.foo { position: static; /* position: relative; position: absolute; position: sticky; position: fixed; */ }

Avui només mirarem position: absolute i position: relative ja que són potser els més versàtils que us proporcionaran molta quantitat de quilometratge un cop us sentiu segurs d’ells.

nivell de seguiment a informàtica

Posicionament relatiu

Quan creeu un element HTML position: relative, es mantindrà al flux del disseny, però el podreu moure.

.green-square { position: relative; top: 25px; left: 25px; /* ... */ }

Juntament amb position: relative normalment voldreu definir el top, right, bottom, o left compensar.

Podeu pensar que la posició relativa és: relativa a la ubicació inicial. En aquest cas, el quadrat verd és ara 25px from the left i 25px from the top d’on inicialment anava a ser.

El que també cal destacar és que l’amplada i l’alçada es conserven a la quadrícula. Això vol dir que encara es té en compte en el flux del disseny ... s’acaba de fer una mica.

Posicionament absolut

El posicionament absolut és una regla CSS molt potent per moure elements HTML. De vegades es donen resultats inesperats:

c tutorial pdf nítid
.orange-square { position: absolute; top: 0px; left: 0px; /* ... */ }

El quadrat taronja és en realitat el 13è d’aquests 25 quadrats (el que es troba al mig de la quadrícula), però sembla que és l’últim quadrat. Estrany. L'ús de position: absolute treu elements del flux de manera que el seu espai a la quadrícula es redueix.

Sí, però per què hi ha tot allà dalt ?!

Coordenades originàries

El quadrat taronja es col·loca a les coordenades 0x, 0y (per exemple: la cantonada superior esquerra). Com la representació del navegador sempre comença a l'extrem superior esquerre, position: absolute els elements també ho utilitzen com a origen de representació. Podeu utilitzar top / right / bottom / left propietats per compensar-la des d’aquí.

Però també podeu donar-li diferents coordenades originàries ...

.grid { position: relative; } .orange-square { position: absolute; top: 0px; left: 0px; /* ... */ }

A l'exemple anterior, l'element pare (div.grid) té el position: relative regla que fa que el quadrat taronja prengui això com a origen de representació.

botó d'opció material ui

🤨🧐🤨🧐

Bastant estrany si no ho heu presenciat abans. Ni tan sols vaig aprendre això fins fa dos anys ... després d’haver utilitzat CSS durant uns 6 anys.

Tot i que pot semblar un comportament poc intuitiu, en realitat és intencionat. Permetre això us proporciona molt control sobre on / com organitzeu els elements HTML ... tal com veurem a les demostracions següents.

Temps de demostració.

Aquí teniu alguns exemples d’ús de position: absolute i position: relative per crear dissenys interessants.

Alicia al país de les meravelles

Aquest és un fragment d'Alícia al país de les meravelles on algunes de les lletres es desplacen amb unes poques position: relative regles.

The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down . . .

Elements en línia es mouen en aquesta demostració, però també podeu fer-ho per bloquejar elements. Tingueu la seguretat: altres elements HTML no ocuparan el seu espai i, per tant, arruïnaran aquest efecte.

exemple de piton api ameritrade

Elements HTML superposats

Com hem tractat anteriorment, si col·loqueu elements absolutament posicionats dins d’uns elements relativament posicionats, podreu agrupar-los eficaçment en capes d’elements HTML.

Embalatge d'aquestes imatges absolutament posicionades amb un pare que està relativament posicionat, obtenim aquest retrat fantàstic del nostre caimà favorit.

Un cop us sentiu còmode utilitzant position: relative i position: absolute junts, començareu a pensar en termes de crear capes exuberants d'elements HTML en lloc de pensar en una mentalitat estrictament 2D. És una cosa que portarà el vostre joc CSS al següent nivell.

Fossa de color

Aquesta demostració és similar a l’anterior, però aquí estem fent servir 5 imatges que estan absolutament posicionades dins d’un únic contenidor relativament situat .

El que és genial és que un cop obtingueu el width i top / left valors adequats per a cadascuna de les 5 imatges, essencialment podeu tractar aquesta cosa com un sol element visual. Mou-la per la pàgina web, posa altres elements HTML al costat, anima-la ... conservarà aquesta aparença exacta com si fos una sola imatge.

Conclusió

Quan comenceu a utilitzar position: relative i position: absolute obre un nou món de possibilitats de disseny. Podeu crear elements visuals en capes i sentir una profunda sensació de confiança sobre com es renderitzaran els navegadors i, per tant, col·locar els elements visuals que heu dissenyat tan meticulosament.

#css #html # desenvolupament web

alligator.io

Guia pràctica sobre l'ús de la posició CSS ​​relativa i absoluta

Guia pràctica per fer servir CSS Position Relative & Absolute: en aquest article, aprendreu a utilitzar la posició CSS: relativa i position: absoluta mitjançant una gran quantitat de demostracions i ajuts didàctics.