Tipos de position en css

Inicio » Tipos de position en css

Posición: css absoluto

Al diseñar páginas en HTML, es posible que quieras cambiar la posición de todos los elementos de la página según la página o el diseño. Por ejemplo, al cargar la página un elemento estará posicionado en un lugar, el otro estará en otro lugar o ambos elementos deberán estar colocados de forma relativa. Para implementar esto, las propiedades de posición te permiten indicar qué tipo de posición debe tener un elemento según los escenarios requeridos como “fijo”, “relativo”, “pegado”, “absoluto”, etc. en tu código HTML. En CSS Position Relative, veremos cómo podemos posicionar diferentes elementos en una página HTML utilizando las propiedades de posición de CSS mediante algunos ejemplos.

Ahora la pregunta es ¿cuáles son los diferentes valores disponibles? Son básicamente diferentes tipos de posiciones.  Para ello, puedes consultar la siguiente tabla de valores donde se describen varios tipos de posición.

Si un elemento se define como estático, entonces el elemento siempre tendrá la posición según el flujo normal de la página. Esta es la condición cuando no se define nada como elemento en el diseño de una página HTML. También es el valor por defecto. El elemento estático no cambia su posición.

Css position: absoluto relativo

positionLa propiedad CSS position establece cómo se posiciona un elemento en un documento. Las propiedades top, right, bottom y left determinan la ubicación final de los elementos posicionados.SintaxisPosición: estática;

El elemento se posiciona según el flujo normal del documento, y luego se desplaza respecto a sí mismo en función de los valores de top, right, bottom y left. El desplazamiento no afecta a la posición de ningún otro elemento; por lo tanto, el espacio dado al elemento en el diseño de la página es el mismo que si la posición fuera estática.

El elemento se elimina del flujo normal del documento y no se crea ningún espacio para el elemento en el diseño de la página. Se posiciona respecto a su ancestro más cercano posicionado, si lo hay; en caso contrario, se coloca respecto al bloque contenedor inicial. Su posición final viene determinada por los valores de arriba, derecha, abajo e izquierda.

El elemento se elimina del flujo normal del documento y no se crea ningún espacio para el elemento en el diseño de la página. Se posiciona en relación con el bloque contenedor inicial establecido por la ventana gráfica, excepto cuando uno de sus ancestros tiene una propiedad de transformación, perspectiva o filtro establecida a algo distinto de ninguno (véase la especificación de transformaciones de CSS), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Tenga en cuenta que hay incoherencias en los navegadores con la perspectiva y el filtro que contribuyen a la formación del bloque contenedor). Su posición final está determinada por los valores de top, right, bottom y left.

Posición css

CSS está diseñado para permitir la separación de la presentación y el contenido, incluyendo el diseño, los colores y las fuentes[3]. Esta separación puede mejorar la accesibilidad del contenido; proporcionar más flexibilidad y control en la especificación de las características de la presentación; permitir que varias páginas web compartan el formato especificando el CSS relevante en un archivo .css separado, lo que reduce la complejidad y la repetición en el contenido estructural; y permitir que el archivo .css se almacene en la caché para mejorar la velocidad de carga de la página entre las páginas que comparten el archivo y su formato.

La separación del formato y el contenido también hace posible presentar la misma página de marcado en diferentes estilos para diferentes métodos de representación, como en pantalla, en impresión, por voz (a través de un navegador basado en el habla o un lector de pantalla) y en dispositivos táctiles basados en Braille. CSS también tiene reglas para alternar el formato si se accede al contenido en un dispositivo móvil[4].

Las especificaciones CSS son mantenidas por el Consorcio de la World Wide Web (W3C). El tipo de medio de Internet (tipo MIME) text/css está registrado para su uso con CSS mediante el RFC 2318 (marzo de 1998). El W3C dispone de un servicio gratuito de validación de documentos CSS[5].

Posición css: relativa al padre

Sin embargo, el div está dentro de un contenedor centrado. Cuando utilizo position:fixed se fija el div en relación con la ventana del navegador, de forma que queda contra el lado derecho del navegador. En cambio, debería fijarse en relación con el contenedor.

Respuesta larga: El problema de usar el posicionamiento “fijo” es que saca al elemento del flujo, por lo que no puede ser reposicionado con respecto a su padre porque es como si no tuviera uno. Sin embargo, si el contenedor es de un ancho fijo y conocido, se puede utilizar algo así:

Esto es información obsoleta. Ahora es posible centrar el contenido de un tamaño dinámico (horizontal y verticalmente) con la ayuda de la magia de la transformación de CSS3. El mismo principio se aplica, pero en lugar de utilizar el margen para desplazar su contenedor, puede utilizar translateX(-50%). Esto no funciona con el truco del margen anterior porque no sabes cuánto desplazar a menos que el ancho sea fijo y no puedes usar valores relativos (como el 50%) porque será relativo al padre y no al elemento al que se aplica. transform se comporta de manera diferente. Sus valores son relativos al elemento al que se aplican. Así, 50% para transform significa la mitad del ancho del elemento, mientras que 50% para margin es la mitad del ancho del padre. Esta es una solución para IE9+

Ir arriba