CSS: diferència entre les propietats de posició

A la meva entrada anterior, vaig escriure sobre l'estat de la pantalla i com pot ajudar-vos a col·locar articles a la pàgina mitjançant CSS. Podeu utilitzar una altra propietat CSS anomenada per controlar la ubicació de l'element a la pàgina. Això, juntament amb la funció de visualització, us donarà més detalls sobre la posició del vostre article.

La funció de posicionament és una mica confusa que la funció de visualització. No us preocupeu, no sou l’únic que no sap què farà cada posició per al vostre article. Espero que aquest post ajudi a aclarir aquestes àrees ambigües.

Els articles solen col·locar-se a la pàgina, de vegades amb els valors superior, inferior, esquerre i dret respecte a la pròpia pàgina. Tanmateix, la funció de posicionament determina on es troben a la pàgina. Hi ha diverses funcions de posicionament:

  • Estàtic: l'estat predeterminat de cada element. No hi ha cap posició designada i l’element normalment surarà a la pàgina. No cal que especifiqueu el valor d'aquesta posició si voleu cancel·lar una posició preestablerta. Per exemple, si el vostre lloc web té posicions predeterminades.
  • Relatiu: els elements relativament posicionats poden tenir posicionament quan hi ha funcions addicionals disponibles: superior, inferior, esquerra i dreta. Una característica addicional allunyarà l'element de la normalitat. No es creen espais quan s'utilitza aquesta posició. En aquesta posició, també podeu utilitzar la propietat índex z. De manera predeterminada (valor: automàtic), l’element apareix per sobre de qualsevol altre element estàtic.

* Nota: Podeu utilitzar la propietat de l'índex z només en elements incrustats. Aquesta funció no funciona amb els elements ubicats estàticament. L’índex Z controla l’ordre dels articles. Podeu canviar el valor de l’índex z per controlar l’aspecte d’un conjunt d’elements. L’índex z superior situa l’element en l’ordre de la capa inferior i viceversa.

  • Arreglat: l’element absolutament posicionat està posicionat en relació amb la finestra de la finestra de visualització i del navegador i continua sent el mateix, fins i tot quan es desplaça. Si utilitzeu aquesta posició i sou tan flexibles com la pantalla, el posicionament absolut funciona en contenidors flexibles. Tot i això, la posició absoluta produeix conflictes amb nens resistents (plats doblats).
  • Absolut: l'element absolut es situa en relació amb l'ancest més proper (element pare / contenidor). Si l’ancestre no és un element, l’element es posiciona ell mateix contra el cos del document. A diferència de la posició absoluta i fixa, l’element es mou a la pàgina mentre gira. Si es defineix un posicionament absolut, s'elimina l'element del flux d'altres elements del document. Aquest element absolutament incrustat no afecta els altres elements de la pàgina i viceversa.
  • Float: s'utilitza per embolicar el text al voltant de les fotos i situar-ne més a l'esquerra o a la dreta de la pàgina.
  • Exactament: mou els elements flotants cap a l'esquerra o a la dreta, o ambdues, per baixar el contingut i el contingut per aparèixer després de l'element flotant. També podeu moure l’element flotant a inline-start o inline-end.

Comproveu visualment si hi ha diferències entre les funcions de disseny visual i es tracta d’un document de posicionament CSS més detallat.