La posició dels elements HTML juga un paper vital en l'organització dels components de la pàgina web. Més concretament, la posició dels elements es pot ajustar utilitzant el CSS ' posició ' propietat. Aquesta propietat es pot associar amb propietats de compensació, com ara propietats superior, esquerra, dreta i inferior, proporcionant valors específics per ajustar l'element a la pàgina. Tanmateix, el ' absolut ” Els elements posicionats es poden ajustar en relació amb l'element posicionat més proper.
Aquesta publicació explicarà el posicionament absolut CSS.
Propietat 'posició' CSS
El ' posició La propietat de CSS es pot utilitzar per ajustar la posició de l'element. Els diferents valors de la propietat de posició són fixos, absoluts, relatius, estàtics i enganxosos. Aquests valors s'estableixen amb les propietats de compensació, com ara superior, dreta, esquerra i inferior, per ajustar la posició de l'element.
Com aplicar el posicionament absolut CSS?
El posicionament absolut de l'element es pot aplicar mitjançant el CSS ' posició 'propietat amb el valor' absolut ”. L'element amb la posició absoluta s'ajusta segons el seu element pare més proper. Però si l'avantpassat no està posicionat, s'ajustarà en relació a la secció del cos del document.
Exemple
Entenem el concepte amb un exemple pràctic.
Pas 1: creeu un fitxer HTML
Al fitxer HTML, dins de l'element del cos, afegiu un div amb el nom de la classe ' principal ”. A continuació, dins del div creat, afegiu una etiqueta HTML associada amb els atributs següents:
-
- “ src ” proporciona un enllaç a la imatge.
- “ classe ” s'utilitza al CSS per estilitzar els elements.
- “ tot ” l'atribut especifica el text que es mostra en lloc de la imatge si la imatge no es carrega a la pàgina.
- “ tot ” l'atribut especifica el text que es mostra a la pàgina en lloc de la imatge si la imatge no es carrega a la pàgina.
A continuació, afegiu un altre div que contingui l'encapçalament i els elements h1 i p del paràgraf:
< div classe = 'principal' >< div classe = 'contingut' >
< img src = 'images/linuxlogo.png' classe = 'casa' tot = 'logotip de Linux' amplada = '80 px' >
< h1 > El posicionament absolut CSS h1 >
< pàg > Hola, equip de Linuxhint ! pàg >
div >
div >
En CSS, s'utilitzen diverses propietats d'estil per decorar els elements HTML.
Pas 2: Estil 'tots' els elements
* {font-family: Verdana, Ginebra, Tahoma, sans-serif;
}
Els elements HTML s'estilen utilitzant el ' família de tipus de lletra 'propietat amb el valor' Verdana, Ginebra, Tahoma, sans-serif ”. Aquesta llista de valors garanteix que si el navegador no admet el primer estil, s'aplicarà l'altre.
Pas 3: estil 'casa' div
.casa {posició: absoluta;
superior: 50 píxels;
esquerra: 45px;
}
A continuació es mostren les propietats aplicades al ' casa ” div:
-
- “ posició ” La propietat estableix la posició de l'element. Aquí, l'afegit ' absolut ” col·locarà l'element en relació a la secció del cos de l'HTML.
- “ superior La propietat s'utilitza per a l'ajust vertical de l'element.
- “ esquerra ” s'utilitza per a l'ajust horitzontal de l'element.
Pas 4: estil div 'contingut'.
.contingut {color de fons: blau cadet;
amplada: 300 píxels;
alçada: 250px;
farciment-esquerra: 40px;
marge esquerre: 80 píxels;
}
A continuació es mostren les propietats CSS que s'apliquen al ' contingut ” div:
-
- “ color de fons ” estableix el color de fons de l'element.
- “ amplada La propietat estableix l'amplada de l'element.
- “ alçada La propietat estableix l'alçada de l'element.
- “ farciment-esquerra ” s'estableix per afegir espai al costat esquerre del contingut de l'element.
- “ marge-esquerra ” La propietat especifica l'espai al costat esquerre de l'element.
En aquest punt, la nostra pàgina web tindrà aquest aspecte:
A partir del resultat anterior es pot veure que la imatge de la casa div es col·loca a 50 px des de la part superior i 45 px des de l'esquerra del cos del document. A més, la posició del div inicial s'estableix en relació a la secció del cos de l'HTML.
Com ajustar la posició de l'element 'relativa' a l'element pare posicionat?
Aquesta secció us guiarà per ajustar la posició de l'element en relació amb l'element principal de la posició més propera.
Estableix 'posició' Propietat de la div 'contingut'.
posició: relatiu;
Per ajustar la posició de l'element respecte a l'element pare, configureu el ' posició ' propietat de l'element pare a ' relatiu ” valor.
Estableix la propietat 'posició' de l'element 'img'.
.casa {posició: absoluta;
superior: 100 píxels;
esquerra: 220px;
}
Aquí:
-
- “ posició ' propietat amb el valor definit com ' absolut ” es col·locarà en relació a l'element pare (és a dir, la posició del div de contingut s'estableix amb el valor relatiu).
- “ superior La propietat s'utilitza per establir la posició de l'element des de la part superior.
- “ esquerra ” s'utilitza per establir la posició de l'element des de l'esquerra.
Sortida
Es pot veure pel resultat que la imatge s'ha posicionat en relació amb el seu div principal i sembla adequat.
Conclusió
El CSS ' posició ” s'utilitza per establir la posició dels elements HTML. Aquesta propietat es pot valorar com a fixa, relativa, absoluta, enganxosa i estàtica. El ' absolut ” el valor posicionarà l'element corresponent al seu element pare situat a prop. Aquest post ha explicat el posicionament absolut CSS amb un exemple pràctic.