Tipos de posicionamiento css. Posicionamiento absoluto en CSS: entenderlo de una vez por todas

Del autor: Te saludo. El posicionamiento de elementos CSS es un tema muy importante en la creación de sitios web. En este artículo, propongo considerar con más detalle todas las formas de mover bloques por una página web.

cuales son los tipos

Si hablamos del posicionamiento de los elementos del bloque, se establece mediante la propiedad de posición. Tiene cuatro significados y cada uno merece una consideración por separado.

posicionamiento absoluto

Esta es la primera especie conocida. Se establece así: posición: absoluta. Después de esto, el bloque pierde sus propiedades habituales y se sale completamente del flujo normal. ¿Qué es esta corriente? Intente colocar varios elementos de bloque seguidos en su marcado. ¿Cómo se convertirán? Uno tras otro, y no de otra manera.

Este es el comportamiento normal de los bloques por defecto. Pero ¿qué pasa con un bloque que tiene definido un posicionamiento absoluto? Se sale completamente del flujo normal, otros bloques simplemente dejan de notarlo, como si nunca hubiera existido, pero el elemento permanece en la página. El posicionamiento absoluto en CSS se utiliza a menudo para la colocación precisa de elementos decorativos, iconos y otros elementos de diseño.

Ahora se puede mover usando las propiedades izquierda, derecha, superior e inferior. De forma predeterminada, el movimiento es relativo a los bordes de la ventana del navegador, pero si el elemento principal tiene una posición: relativa, entonces el movimiento es relativo al bloque principal.

Bloque( posición: absoluta; abajo: 0; derecha: 0; )

Bloquear ( posición: absoluta; abajo: 0; derecha: 0;

El elemento se moverá a la esquina inferior derecha. Noto que a menudo hacen el botón superior de esta manera: simplemente lo colocan absolutamente en la esquina. Aquí hay otro ejemplo en el que mostraré primero el posible marcado:

< div id = "wrapper" > < div class = "block" > < / div > < / div >

Y ahora los estilos CSS para este fragmento:

#wrapper( posición: relativa; ) .block( posición: absoluta; arriba: 0; derecha: 10px; )

#envoltura( posición: relativa; Bloquear ( posición: absoluta; arriba: 0; derecha: 10px;

En este ejemplo, primero asignamos un posicionamiento relativo al contenedor principal (relativo; hablaremos más sobre esto más adelante en el artículo) y luego configuramos un posicionamiento absoluto para el mismo elemento.bloque. Como resultado, las coordenadas no se contarán desde la ventana del navegador, sino desde los bordes del elemento principal, es decir, el bloque contenedor.

Posicionamiento relativo de elementos CSS.

Este es el siguiente tipo y se escribe así: posición: relativa. Las coordenadas se especifican mediante las mismas propiedades que para la posición absoluta. La única diferencia significativa es que el elemento no se sale formalmente del flujo: queda espacio para él.

El funcionamiento de este valor se puede comparar con la visibilidad: oculta, cuando el elemento está oculto de la página, pero el espacio debajo de él permanece intacto. Lo mismo sucede con la ubicación relativa: el bloque se puede mover a cualquier lugar, pero el espacio permanece vacío y no será ocupado por otras partes.

También es importante saber que el desplazamiento no se produce desde los bordes de la ventana del navegador web, sino desde el lugar donde se encontraba originalmente el bloque. Eso es:

Bloque (posición: relativa; arriba: 10px; derecha: 50px;)

Bloquear ( posición: relativa; arriba: 10px; derecha: 50px;

El bloque se moverá 50 píxeles hacia la derecha y 10 hacia la izquierda.

Fijación

Probablemente hayas visto más de una vez en sitios de Internet cuando, al desplazarte, algún banner no desaparecía, sino que continuaba en tu zona de visibilidad, como si estuviera pegado a un solo lugar. Esto se implementa principalmente mediante posicionamiento fijo. Para hacer esto necesitas escribir:

Posición: posición estática o estática normal

El último tipo es estático, este es el comportamiento normal de los elementos del bloque. No es necesario especificarlo porque es el predeterminado, pero aún necesita conocer el cuarto valor. A veces, position: static se escribe para anular otro tipo de posicionamiento cuando ocurren ciertos eventos en una página web.

¿Cómo posicionar correctamente los bloques en CSS?

Hemos discutido los significados, pero esto no es suficiente para cerrar este tema por nosotros mismos. En realidad, es necesario comprender dónde y qué tipos de posicionamiento se deben aplicar. Ya les he dado un ejemplo con fijo: se puede usar para crear columnas laterales, encabezados o pies de página fijos.

El posicionamiento relativo ayudará cuando necesite mover ligeramente un bloque en relación con su posición y al mismo tiempo mantener su lugar en el flujo. También se les da a los bloques principales el uso de movimiento absoluto para elementos secundarios.

Otras técnicas: centrar, bloques flotantes.

La propiedad de posición no resuelve todos los problemas con la ubicación de elementos de bloque. ¿Cómo crearías, por ejemplo, una cuadrícula de sitio usándolo? No tengo buenas ideas. Aquí es donde otras propiedades acuden al rescate.

Las cuadrículas a menudo se crean usando flotadores en CSS. La propiedad le permite presionar un bloque hacia el borde izquierdo o derecho del padre (flotante: izquierda, flotante: derecha), permitiendo que varios elementos del bloque se alineen en una línea, lo cual es común en cualquier sitio.

El centrado se realiza así: el bloque debe escribirse con un cierto ancho y luego establecer la propiedad margen: 0 auto. Es el valor automático el que lo alineará horizontalmente exactamente en el centro. Naturalmente, para ello debe ser el único en su línea, de lo contrario nada funcionará.

Todos los tipos de posicionamiento enumerados en este artículo pueden resultar útiles para un desarrollador web. En algún lugar debe insertar un ícono (posición: absoluta), en algún lugar debe ajustar ligeramente la posición del bloque, dejando algo de espacio detrás de él (posición: relativa) y en algún lugar debe arreglar el widget (posición: fija). En general, el conocimiento de esta propiedad definitivamente no será superfluo.

Bueno, para aprender aún más del mundo de la creación de sitios web, asegúrese de suscribirse a nuestro blog y recibir nuevos materiales de capacitación. También te aconsejo que mires el nuestro, donde también se plantea un tema similar. (posicionamiento de elementos)

¡Ubicación inusual!

¡Decide qué elemento mostrar al frente!

¡Los elementos pueden superponerse!

Posicionamiento

Las propiedades de posicionamiento CSS le permiten posicionar un elemento. También pueden colocar un elemento detrás de otro y especificar qué debe suceder cuando el contenido del elemento es demasiado grande.

Los elementos se pueden colocar usando las propiedades superior, inferior, izquierda y derecha. Sin embargo, estas propiedades no funcionarán a menos que se establezca la propiedad de posición. También funcionan de manera diferente según el método de posicionamiento.

Hay cuatro métodos de posicionamiento diferentes.

Posicionamiento estático

Los elementos HTML se colocan estáticamente de forma predeterminada. Un elemento colocado estáticamente siempre se coloca de acuerdo con el flujo estándar de elementos en la página.

Los elementos colocados estáticamente no se ven afectados por las propiedades superior, inferior, izquierda y derecha.

Posicionamiento fijo

Un elemento de posición fija se coloca en relación con la ventana del navegador.

No se moverá incluso si se desplaza la ventana:

Comentario: IE7 e IE8 admiten el valor fijo solo si se especifica el tipo de documento. DOCTYPE.

Los elementos fijos se eliminan del flujo normal. El documento y otros elementos se comportan como si el elemento fijo no existiera.

Los elementos fijos pueden superponerse a otros elementos.

Posicionamiento relativo

Un elemento relativamente posicionado está posicionado con respecto a su posición normal.

Los elementos relativamente posicionados se utilizan a menudo como contenedores para elementos absolutamente posicionados.

Posicionamiento absoluto

Un elemento en posición absoluta se coloca en relación con el primer elemento principal que no está en una posición estática. :

Si no se encuentra dicho elemento, el elemento padre se toma como

Los elementos absolutamente posicionados se eliminan del flujo de elementos estándar. El documento y otros elementos se comportan como si el elemento posicionado absolutamente no existiera.

Los elementos absolutamente posicionados pueden superponerse a otros elementos.

Elementos superpuestos

Cuando los elementos están ubicados fuera del flujo estándar, pueden superponerse a otros elementos.

La propiedad del índice z especifica el orden vertical de un elemento (qué elemento debe colocarse delante o detrás de otros elementos).

Un elemento puede tener un orden vertical positivo o negativo:

Comentario: Un elemento con mayor orden vertical siempre está delante de elementos con menor orden vertical.

Si dos elementos posicionados se superponen y no se especifica ningún orden vertical, el elemento ubicado más adelante en el código HTML se mostrará en la parte superior.

Más ejemplos
Establecer la forma del elemento

Este ejemplo demuestra cómo definir la forma de un elemento. El elemento se recorta a esta forma y luego se muestra.
Cómo mostrar un elemento desbordado mediante desplazamiento

Este ejemplo demuestra cómo configurar la propiedad de desbordamiento para crear una barra de desplazamiento cuando el contenido del elemento es demasiado grande para caber en el área especificada.
Cómo forzar al navegador a manejar automáticamente el desbordamiento

Este ejemplo demuestra cómo forzar al navegador a manejar automáticamente el desbordamiento.
Cambiando el cursor

Este ejemplo demuestra cómo cambiar el cursor.

Todas las propiedades de posicionamiento CSS

El número en la columna "CSS" indica en qué versión de CSS está definida la propiedad (CSS1 o CSS2).	Propiedad	Descripción	Valores

CSS

Hoy en día, los desarrolladores web pueden crear diseños de páginas web complejos utilizando varias técnicas CSS. Algunas de estas técnicas tienen una larga historia (floating), otras (flexbox) han ganado popularidad en los últimos años.

En este artículo, analizaremos más de cerca algunas cosas poco conocidas sobre el posicionamiento CSS.

Resumen de los métodos de posicionamiento disponibles

La propiedad de posición CSS determina el tipo de posicionamiento de un elemento.

Opciones de posicionamiento

static es el valor de propiedad de posicionamiento predeterminado. Le recomendamos que este elemento no utilice posicionamiento; el posicionamiento solo se aplica si especifica un tipo de posicionamiento distinto al predeterminado.

Para hacer esto, debe establecer la propiedad de posición en uno de los siguientes valores:

• relativo
• absoluto
• fijado
• pegajoso

Y solo después de configurar el posicionamiento, puede usar propiedades que desplacen el elemento:

• bien
• abajo
• El valor inicial de estas propiedades es la palabra clave auto.

Se debe tener en cuenta que si un elemento tiene su propiedad de posición establecida en absoluta o fija, entonces es un elemento en posición absoluta. Además, la propiedad del índice z comienza a funcionar para los elementos posicionados, lo que determina el orden de apilamiento.

Diferencias entre los principales métodos de posicionamiento.

Ahora veamos rápidamente tres diferencias básicas entre los tipos de posicionamiento disponibles:

• Los elementos posicionados absolutamente (absolutos) se eliminan por completo de la corriente y sus vecinos más cercanos ocupan su lugar.
• relativamente posicionados (relativo) y pegados (pegajosos) conservan su lugar en el flujo y sus vecinos más cercanos no lo ocupan. Sin embargo, el relleno de estos elementos no ocupa espacio, sino que otros elementos lo ignoran por completo y esto puede provocar la superposición de elementos.
• Los elementos fijos (y el posicionamiento fijo es un tipo de absoluto) siempre se colocan en relación con el área de visibilidad (ignorando la presencia de posicionamiento en los ancestros), mientras que los elementos fijos se colocan en relación con el ancestro más cercano con desplazamiento (desbordamiento: automático). Y solo en ausencia de tales antepasados ​​​​se ubican en relación con la zona de visibilidad.

Puedes ver esto con más detalle en la demostración:

Nota: El posicionamiento fijo sigue siendo una tecnología experimental con soporte limitado en los navegadores. Por supuesto, si lo desea, puede utilizar un polyfill para agregar esta funcionalidad al navegador, pero dada su baja prevalencia, esta propiedad no se tratará en el artículo.

Elementos de posicionamiento con tipo de posicionamiento absoluto

Estoy seguro de que la mayoría de la gente sabe cómo funciona el posicionamiento absoluto. Sin embargo, muchas cosas al respecto pueden confundir a los principiantes.

Por lo tanto, decidí comenzar con él al describir características poco conocidas del posicionamiento.

Por lo tanto, un elemento en posición absoluta se desplaza en relación con su ancestro posicionado más cercano. Por supuesto, esto funciona si alguno de los ancestros tiene una posición que no sea estática; si el elemento no tiene ancestros posicionados, se desplaza en relación con el área de visibilidad.

Esto se demuestra con el siguiente ejemplo:

En esta demostración, el bloque verde se coloca inicialmente de forma absoluta con relleno cero en bottom:0 y left:0, su antecesor (el bloque rojo) no se posicionó en absoluto.

Sin embargo, hemos posicionado relativamente la envoltura exterior (un elemento con clase jumbotron). Observe cómo cambia la posición del bloque verde cuando cambia el tipo de posición de sus antecesores.

Los elementos absolutamente posicionados ignoran la propiedad flotante

Si aplicamos posicionamiento absoluto o fijo a un elemento flotante, la propiedad flotante se establecerá en none. En cambio, si configuramos un posicionamiento relativo, el elemento permanecerá flotante.

Eche un vistazo a la demostración correspondiente:

En este ejemplo, definimos dos elementos diferentes que flotan hacia la derecha. Tenga en cuenta que cuando un bloque rojo se posiciona absolutamente, ignora el valor de la propiedad flotante, mientras que un bloque verde relativamente posicionado conserva el valor flotante.

Los elementos en línea absolutamente posicionados se convierten en elementos de bloque

Un elemento en línea con posicionamiento absoluto o fijo adquiere las propiedades de un elemento de bloque. La conversión de elementos en línea a elementos de bloque se describe con más detalle en la tabla.

En este caso, creamos dos elementos diferentes. El primero (bloque verde) es un elemento de bloque y el segundo (bloque rojo) es un elemento en línea. Inicialmente, sólo es visible el bloque verde.

El cuadro rojo no es visible porque sus propiedades de ancho y alto solo funcionan con elementos de bloque y de bloque en línea, y como no tiene contenido, no tiene dimensiones.

Cuando asigna una posición absoluta o fija a un bloque rojo, se convierte en un bloque y los tamaños de bloque especificados en él entran en vigor.

Los elementos absolutamente posicionados no tienen colapso del acolchado.

Por defecto, cuando dos márgenes verticales se tocan, se combinan en uno igual al máximo de ellos. A esto se le llama colapso de márgenes.

El comportamiento de los elementos absolutamente posicionados aquí es similar al de los elementos flotantes: su relleno no se combina con el de sus vecinos.

En esta demostración, al elemento se le asigna un relleno de 20 píxeles. Su relleno colapsa con el relleno del elemento principal, que también es de 20 píxeles. Como puede ver, sólo con el posicionamiento absoluto no hay colapso.

Pero ¿cómo podemos evitar que los márgenes colapsen? Necesitamos poner algún tipo de separador entre ellos.

Puede ser relleno o borde y se puede aplicar tanto al elemento principal como al secundario. Otra opción es agregar un clearfix al elemento principal.

Posicionamiento de elementos con píxeles y porcentajes.

¿Alguna vez has usado porcentajes en lugar de píxeles para posicionar elementos? Si la respuesta es sí, entonces sabes que el desplazamiento de un elemento depende de las unidades elegidas (píxeles o porcentajes).

Es un poco confuso, ¿no? Primero veamos qué dice la especificación sobre el porcentaje de compensación:

Desplazamiento como porcentaje del ancho (para izquierda y derecha) o alto (superior o inferior) del bloque principal. Para elementos pegados, el desplazamiento se calcula como un porcentaje del ancho (para izquierda y derecha) o la altura (superior o inferior) del flujo. Los valores negativos son aceptables.

Como se mencionó, cuando establece el desplazamiento como un porcentaje, la posición del elemento depende del ancho y alto de su padre.

La demostración muestra esta diferencia:

Este ejemplo utiliza píxeles y porcentajes para el desplazamiento. Por supuesto, cuando especifica un desplazamiento en píxeles, el elemento se mueve donde sea necesario.

Y si elegimos un porcentaje para el desplazamiento, el resultado dependerá del tamaño del elemento padre. Aquí hay una visualización que muestra cómo se calcula la nueva posición:

Nota: Como probablemente sepa, la propiedad de transformación (junto con las diversas funciones de traducción) también le permite cambiar la posición de un elemento. Pero en este caso, cuando se utilizan porcentajes, el cálculo se basará en el tamaño del elemento en sí y no en su padre.

Conclusión

Espero que este artículo te haya ayudado a comprender mejor el posicionamiento en CSS y haya aclarado algunos de los desafíos.

Una de las mejores cosas de CSS es que los estilos nos brindan la posibilidad de colocar contenido y elementos en una página de casi cualquier forma imaginable. Esto agrega estructura a nuestro diseño y ayuda a que el contenido sea más visual.

Hay varios tipos diferentes de posicionamiento en CSS, cada uno de estos tipos tiene su propio alcance. En este capítulo, veremos algunos casos de uso diferentes (creación de diseños reutilizables y colocación única de elementos desechables), además de describir algunos métodos para hacerlo.

Posicionamiento mediante flotador

Una forma de posicionar elementos en una página es mediante la propiedad flotante. Esta propiedad es bastante versátil y se puede utilizar de muchas maneras diferentes.

Básicamente, la propiedad flotante toma un elemento, lo elimina del flujo normal de la página y lo coloca a la izquierda o derecha de su elemento principal. Todos los demás elementos de la página se ajustarán a dicho elemento. Por ejemplo, los párrafos se ajustarán alrededor de una imagen si el elemento Se establece la propiedad flotante.

Cuando la propiedad flotante se aplica a varios elementos a la vez, es posible crear un diseño con elementos flotantes uno al lado del otro o uno frente al otro, como se muestra en un diseño de varias columnas.

La propiedad flotante toma varios valores, siendo los dos más populares izquierda y derecha, que permiten que el elemento flote hacia la izquierda o hacia la derecha de su padre.

Img (flotante: izquierda;)

flotar en la práctica

Creemos un diseño de página general con un encabezado en la parte superior, dos columnas en el centro y un pie de página en la parte inferior. Idealmente, esta página debería estar marcada con elementos.

,

,