Posición CSS: ejemplos. Posicionamiento de elementos HTML en CSS usando la propiedad de posición (absoluta, relativa, fija, estática)

Trabajan con todos los elementos posicionados excepto los estáticos.

Ejemplo de posicionamiento.

¡Los elementos pueden superponerse entre sí!

¡Mostrando un elemento por encima del resto!

La propiedad de posición tiene 4 valores: estático, fijo, relativo y absoluto. Cada uno de estos significados se demostrará a continuación con un ejemplo de uso.

Antes de analizar en detalle todos los tipos de posicionamiento de elementos en una página, tendremos que considerar qué es el flujo de documentos.

Flujo de documentos

De forma predeterminada, los elementos de una página web se muestran en el orden en que aparecen en el documento HTML, es decir, los elementos de bloque ocupan todo el ancho disponible y se apilan verticalmente uno debajo del otro. Los elementos en línea se alinean horizontalmente hasta ocupar todo el ancho disponible, luego de ocupar todo el ancho se hace un salto de línea y todo comienza de nuevo. Esta disposición de elementos se llama flujo normal(también llamado flujo de documentos o flujo general).

Puede utilizar la propiedad flotante o de posición para eliminar un elemento del flujo normal. Si un elemento "se sale" del flujo normal, los elementos que se encuentran en el código debajo de ese elemento se trasladarán a su lugar en la página web.

Posicionamiento estático

Estático es el posicionamiento predeterminado para todos los elementos de una página web. Si no aplica la propiedad de posición a un elemento, será estático y aparecerá en la página web de acuerdo con el flujo general de elementos.

Al aplicar las propiedades CSS top , left , right o bottom a un elemento posicionado estáticamente, se ignorarán.

Si es necesario, puede configurar el posicionamiento estático en la hoja de estilo usando el valor estático:

Primer párrafo.

Segundo párrafo.

Intentar "

Posicionamiento fijo

Los elementos con posicionamiento fijo se encuentran en la página en relación con la ventana del navegador. Dichos elementos se eliminan del flujo general; los elementos que siguen al elemento fijo en el flujo lo ignorarán, se moverán y ocuparán su lugar en la página web.

Vale la pena prestar atención al hecho de que los elementos con posicionamiento fijo pueden superponerse a otros elementos, ocultándolos total o parcialmente. Al desplazarse por páginas largas, crean el efecto de que los objetos inmóviles permanecen en el mismo lugar:

Texto Texto Texto Texto Texto Texto Texto Algún texto Texto Texto Texto Texto Texto

Intentar "

Posicionamiento relativo

Los elementos con posicionamiento relativo, como los elementos estáticos, permanecen en el flujo general. Cuando aplica las propiedades top , left , right o bottom a elementos relativamente posicionados, se moverán en relación con su ubicación, dejando un espacio vacío donde se encontraba originalmente el elemento.

Dichos elementos no afectan la posición de los elementos que los rodean; los elementos restantes permanecen en su lugar y pueden superponerse mediante un elemento relativamente posicionado:

Título de primer nivel.

Título relativamente posicionado.

Título de tercer nivel.

Intentar "

Nota: Los elementos con posicionamiento relativo (relativo) generalmente se usan como padres para elementos con posicionamiento absoluto (absoluto).

posicionamiento absoluto

Los elementos absolutamente posicionados se eliminan por completo del flujo general, los elementos restantes ocuparán el espacio libre, ignorando por completo los elementos absolutamente posicionados. Luego puede colocar el elemento donde desee en la página web usando las propiedades superior, izquierda, derecha o inferior.

Todos los elementos en posición absoluta se colocan en relación con la ventana del navegador o en relación con el ancestro posicionado más cercano (si lo hay) que tiene una propiedad de posición absoluta, fija o relativa.

Cambiemos la ubicación del logo usando posicionamiento absoluto.
El logotipo ahora estará ubicado en la esquina superior derecha de la página.

Intentar "

Elementos superpuestos

Cuando los elementos están fuera del flujo general de la página, pueden superponerse entre sí. Normalmente, el orden de los elementos corresponde a su orden en el código HTML de la página, sin embargo, es posible controlar el orden de superposición utilizando la propiedad CSS z-index, cuanto mayor sea su valor, mayor será el elemento.

El posicionamiento se especifica mediante la propiedad posición. La propiedad puede tener cuatro valores, que consideraremos.

posicionamiento absoluto

El posicionamiento absoluto se especifica de la siguiente manera:

Posición: absoluta

Después de esto, el bloque pierde sus propiedades habituales y se sale completamente del flujo. ¿Qué es un flujo en este contexto? Intente colocar varios elementos de bloque seguidos en su marcado. Se seguirán unos a otros. Este es el comportamiento predeterminado de los bloques. Si a un bloque se le asigna un posicionamiento absoluto, entonces se sale completamente del flujo, otros bloques simplemente dejan de notarlo, pero el elemento permanece en la página. El posicionamiento absoluto se utiliza a menudo para posicionar con precisión elementos individuales.

Ahora se puede mover usando propiedades. izquierda, bien, arriba Y abajo. De forma predeterminada, el movimiento se produce en relación con los lados de la ventana del navegador, pero si el elemento principal tiene posición: relativa, entonces el desplazamiento se produce en relación con el bloque principal.

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

Elemento con clase bloquear se moverá a la esquina inferior derecha del navegador.

Veamos un ejemplo en el que el bloque está dentro de un elemento principal.

Bloquear dentro del elemento padre

Primero asignamos un posicionamiento relativo al contenedor principal ( relativo), y para el elemento bloquear establecer absoluto. Como resultado, las coordenadas no se contarán desde la ventana del navegador, sino desde los bordes del elemento principal, es decir, el bloque. envoltura.

Posicionamiento relativo

El posicionamiento relativo se escribe así: posición: relativa. Las coordenadas se especifican mediante las mismas propiedades que con el posicionamiento absoluto. La única diferencia significativa es que el elemento no se sale formalmente del flujo: queda espacio para él.

El rendimiento de este valor se puede comparar con visibilidad: oculta, cuando un elemento está oculto en la página, pero el espacio debajo de él permanece intacto. El bloque se puede mover a cualquier lugar, pero el espacio permanece vacío y no será ocupado por otras partes. Puedes mover un bloque usando propiedades. arriba, izquierda etcétera.

Recuerde que el desplazamiento no proviene de los bordes de la ventana del navegador, sino del lugar donde se encontraba originalmente el bloque.

Bloque estándar

Bloque estándar

El bloque se moverá 50 píxeles hacia la derecha y 10 píxeles hacia arriba. Pero su lugar permaneció intacto.

Bloque estándar

Como puede ver, también puede establecer valores negativos.

Posicionamiento fijo

Una opción común es cuando, al desplazarse, un elemento parece estar pegado a un lugar. Por ejemplo, se utiliza a menudo en el encabezado del sitio. Esto se implementa principalmente mediante posicionamiento fijo. Para hacer esto necesitas escribir:

Bloquear( posición: fija; )

En el comportamiento, un desplazamiento fijo es similar a uno absoluto: el elemento se sale del flujo normal, su lugar queda libre y otros elementos no lo notan en absoluto. Con esta técnica, puede crear muy fácilmente paneles superiores, inferiores y laterales en su sitio que no desaparecerán al desplazarse y siempre estarán visibles.

Posicionamiento estático

El último tipo es el posicionamiento estático, este es el comportamiento habitual de los elementos de bloque. No es necesario especificarlo porque es el predeterminado. Pero a veces posición: estática se utiliza para anular otras posiciones en ciertos eventos en una página web en scripts JavaScript.

La propiedad de posición CSS es responsable de la ubicación de un elemento en relación con otros elementos. Se utiliza con bastante frecuencia en estilos y es compatible con todos los navegadores (Internet Explorer, Netscape, Opera, Safari, Mozilla, Firefox, Chrome, Yandex Browser). Pongamos un ejemplo sencillo para entenderlo.

Ejemplo 1. código HTML:

Texto sin formato Este texto está 10 píxeles más abajo. Y este es más alto al contrario.

Una vez que abra este ejemplo en una ventana del navegador, debería ver algo como esto:

Este es el ejemplo más simple del uso de la propiedad de posición CSS. Ahora veamos todos los atributos posibles que puede adoptar este parámetro.

Sintaxis de posición CSS

posición: absoluto | fijo | relativo | estática | heredar ;

Nota: vía | Se enumeran todos sus valores posibles. Considere cada parámetro por separado

1. Posición CSS: relativa

Posición de la propiedad: relativa - posicionamiento relativo. Vimos un ejemplo del uso de este elemento justo arriba.

Cuando se especifica este parámetro, se activan los siguientes parámetros:

• abajo
• izquierda
• bien

Si no se especifican compensaciones, es decir

arriba: 0px; abajo: 0px; izquierda: 0px; derecha: 0px;

entonces el elemento html se muestra en el mismo lugar que de forma predeterminada (es decir, sin especificar relativo). Si se especifican desplazamientos, el elemento se desplazará con respecto a su ubicación, ya sea abajo, arriba, a la izquierda o a la derecha. Al mismo tiempo, otros elementos del entorno creen que no hay desplazamiento. En resumen, usar relativo sólo tiene sentido si hemos especificado compensaciones.

Para explicar esta característica, demos un ejemplo.

Ejemplo 2. código HTML:

¿Cuál es la diferencia entonces?...

Ejemplo 2*. Agregue al primer div: posición: relativa; . código HTML:

¿Cuál es la diferencia entonces? ...

El código se convierte en lo siguiente:

Nuestro cuadrado rojo se movió 200 píxeles hacia la izquierda y 100 píxeles hacia abajo y cubrió parcialmente el texto con su área. Al mismo tiempo, el lugar donde debería haber estado nuestro cuadrado, el texto todavía lo rodea como si estuviera allí.

2. Posición CSS: absoluta

Propiedad de posición CSS: absoluta: en este caso, se supone que el origen es la esquina superior izquierda. Las propiedades superior, inferior, izquierda y derecha también se aplican aquí. En este caso, un elemento que tiene el atributo absoluto pasa a ser como un elemento de bloque. Pongamos un ejemplo.

Ejemplo 3. código HTML:

Envía un mensaje de texto a uno Texto dos Texto tres

El código se convierte en lo siguiente:

En este caso, los tres textos están escritos uno tras otro. Tenga en cuenta que sangramos específicamente el lado izquierdo padding-left:100px;

a 100 píxeles. Ahora veamos qué sucederá si agregamos la posición: atributo absoluto a la segunda fuente.

Envía un mensaje de texto a uno Texto dos Texto tres

El código se convierte en lo siguiente:

Primera 3*. código HTML:

Tenga en cuenta que el texto dos se ha movido hacia la izquierda y ahora está en la primera posición. En este caso, el texto tres ocupó el lugar del segundo. ¿Por qué sucedió esto? Porque agregamos position:absolute y left padding: left:0px . Como escribí anteriormente, con el atributo absoluto, el punto de referencia del elemento se convierte en la esquina superior izquierda.

3. Posición CSS: fija

Posición CSS: propiedad fija: posición fija del elemento, incluso al desplazarse. Este es quizás uno de los usos más comunes de la posición. Si se especifican los parámetros superior e izquierdo, el elemento se colocará en relación con la esquina superior izquierda. Si no se especifican los parámetros, se fijará en la posición en la que aparece en la página. Pongamos un ejemplo.

Ejemplo 4. Código HTML:

Texto fijo
Texto fijo ...

El código se convierte en lo siguiente:

Aquí viene el texto texto texto

En este ejemplo, la línea superior con el texto "texto fijo" siempre está visible en la página del navegador en cualquier posición de desplazamiento. Esta propiedad suele ser utilizada por sitios que colocan líneas publicitarias como NOLIX, DAOS, etc. Vea cómo hacer una cadena como NOLIX y DAOS.

4. Otros valores de posición CSS

4.1. Posición de propiedad: estática: este parámetro es el predeterminado. Las opciones izquierda, superior, derecha e inferior no funcionan con este valor.

4.2. Posición de la propiedad: heredar: hereda el valor del padre. Aquellos. Se examina el elemento más cercano que contiene este elemento html y se hereda su valor.

Para acceder a la posición desde JavaScript, debe escribir la siguiente construcción: document.getElementById("elementID").estilo.posición

="VALOR". Los programadores principiantes a menudo tienen dificultades para posicionar elementos usando CSSEn realidad una propiedad CSSMucho más fácil de aprender de lo que parece a primera vista. Una vez que lo domines, tendrás una poderosa herramienta con la que podrás colocar todos los elementos de la página en los lugares correctos. pero aPara lograr un resultado, es necesario conocer todos los valores existentes, ya que los principios de su funcionamiento varían mucho.

Detalles de la construcción del flujo de documentos

Funciona con el flujo de la página web.¿Cómo entender esto? De forma predeterminada, todos los elementos de la página están organizados en el orden en que los creó enhtml-marcas. si etiquetaencabezamientoubicado encima de la etiquetapie de página,luego se mostrará más arriba en la página. Y viceversa, si por algún motivo decides colocarpie de páginaVHTMLencima del "encabezado", el "pie de página" de la página se mostrará encima del "encabezado". En este caso, los elementos de bloque ocupan todo el ancho disponible. Las minúsculas, a su vez, se colocan en una línea hasta ocuparla toda, para luego comenzar a transferirse a una nueva. Este orden se denomina "flujo de documentos".

Para cambiar el comportamiento de una secuencia, utilice la propiedad Posiciónen CSS. También puede cambiar debido a la propiedad.flotarpero no lo consideraremos. Usando el posicionamiento, puedes forzar a un elemento a "salir" de su flujo normal, después de lo cual comenzará a comportarse de una manera nueva. Cómo exactamente depende del valor de la propiedad utilizada.

Posición CSS: estática

Posición: estática,o posicionamiento estático,es el valor predeterminado para todos los bloquesHTML,que tu creaste.En circunstancias normales no tendrás que lidiar con eso. Si no se especifica ningún posicionamiento para un bloque o línea, entonces tiene un valorestático.En la página, dicho componente se muestra de acuerdo con el flujo. Si le das propiedadesderecha/izquierdaoarriba/abajono habrá ningún efecto.

Posición CSS: fija

Al utilizar esta propiedad el elementoaparece fuera del flujo normal del documento. Ahora se calcula su posición.en relación con la ventana del navegador, independientemente de cómo se coloquen otros componentes. En otras palabras, un bloque con Posición: fijadoirá a la parte superior de la página, presionará contra el borde de la ventana del navegador y otros elementos ocuparán su lugar de acuerdo con el flujo.

La característica principal de los elementos de posición fija es que pueden superponerse a otros bloques y líneas de la página. Al desplazarse por un bloque con Posición: fijadoparecerá permanecer en su lugar sin desaparecer de la pantalla. Esto es útil si necesitas realizar una navegación o elemento similar al que el usuario deba tener acceso siempre.El posicionamiento fijo también se utiliza si necesita colocar un botón de desplazamiento rápido en una parte específica de la página.

Posición CSS: relativa

El uso de esta propiedad se llama posicionamiento relativo.. Si establece la propiedad Posición del elemento: relativo,permanecerá en su lugar. A primera vista, no sucederá nada especial, pero todo cambiará si además utilizas las propiedadesderecha/izquierdaYarriba/abajo.Se pueden utilizar para controlar el movimiento de un componente en relación con su ubicación. En el lugar donde antes estaba el bloque o la línea, habrá un espacio vacío: otros elementospermanecerán en sus posiciones, sin prestar atención al espacio desocupado.

Cuando se mueve, el componente no afecta de ninguna manera la posición de las partes circundantes de la página. Permanecerán en sus lugares, aunque un bloque relativamente posicionado pueda bloquearlos.La propiedad en sí rara vez se utiliza. Generalmente se usa en combinación con la siguiente opción.

posicionamiento absoluto

Una de las opciones más interesantes y más utilizadas.Cuando se utiliza la propiedad Posicióncon significadoabsolutoLa posición del componente de la página se calculará en relación con la ventana del navegador.OtrosLos elementos (que no están absolutamente posicionados) parecerán "olvidarse" de la existencia de su "hermano" con Posición.: absolutoy ocupará su lugar en el arroyo.Parecería que todo es exactamente igual que en el caso de Posición:fijadopero también hay serias diferencias.

En primer lugar, la posición del elemento se puede controlar libremente; para ello se utilizan propiedadesarriba/derecha/abajo/izquierda.Por ejemplo, si establece el valorabajo: 100 píxeles,el bloque se “empujará” desde la parte inferior de la página 100 píxeles. En segundo lugar, al desplazarse, el componente "absoluto" permanecerá en su lugar, en lugar de moverse con la página.

Interacción de bloques absolutos con elementos padres.

Puede lograr un control aún más preciso sobre un componente absolutamente posicionado. Para hacer esto, debe establecer la propiedad Posición en su padre: fijo, relativooabsoluto.

Veamos un ejemplo. Tienedivcon claserelativo-div,en cuyo interior se encuentradivcon clasediv absoluto.Establezca la propiedad Posición en el bloque interior: absoluto.Inmediatamente "sale volando" de la secuencia y termina en algún lugar en la parte superior, porque ahora su ubicación se calcula en relación con la ventana del navegador. Ahora configuramos el bloque con la clase.div relativoPropiedad de posición: relativoy el “hijo pródigo” regresa a su lugar. Casi. De hecho, termina en la esquina superior izquierda del elemento principal.

¿Por qué sucede esto? El punto son los detalles de la propiedad Posición.: absoluto.Por defecto, su posición depende de la ventana del navegador, pero si el "padre" también está colocado en otra posición que no seaestáticola posición comienza a depender del elemento padre. Esto es muy conveniente porque puede colocar el componente en cualquier lugar sin tener que calcular números enormes en relación con la ventana del navegador. Esta técnica se suele utilizar para colocar iconos, botones y otros elementos pequeños.

Una de las principales dificultades para los principiantes es centrar el elemento vertical y horizontalmente. Usar sabiamente la propiedad Posición, haciéndolo más fácil que nunca.Posición CSS: centrado absoluto se establece de la siguiente manera. Digamos que tienes dIVcon clasediv absoluto,que está en un "div" con una claserelativo-div.El "padre" está posicionado relativamente y su ancho es igual al ancho de toda la página. "Descendiente" tiene un anchoy altura 400 píxeles,posicionamiento absoluto y se coloca de forma predeterminada en la esquina superior izquierda del elemento principal.

Todo lo que necesitas hacer es dar el componente absoluto.arriba: 50%Yizquierda: 50%.¡Casi listo!Absoluto-divSe movió y se encontró casi en el centro, pero no del todo. La mitad del "padre" toca su borde y queremos que el centro del "hijo" esté en el centro del bloque. Para hacer esto necesitas preguntarlemargen izquierdoYmargen derechocon valores -200píxeles.Esto desplazará el bloque absolutamente posicionado a la mitad de su altura y ancho. ¡Eso es todo, está en el centro!

Componentes superpuestos

Un problema puede ser la aparentemente difícil "superposición" de elementos posicionados sobre sus "vecinos". Por ejemplo, un componente con Posición: fijadose superpondrá todo en la página. Puedes corregir la situación usando la propiedad.índice zsin embargo, recuerda que sólo funciona para elementos posicionados. En consecuencia, si desea colocar un bloque encima de un elemento colocado de forma fija, este bloque también deberá posicionarse. Por ejemplo, relativo.

lLa mejor manera de dominar el posicionamiento es mirar ejemplos de posiciones.CSS,experimenta y prueba algo propio. Intente aprender a usarlo en combinación con la función.calcular()- esto permitirá personalizar la ubicación de manera más flexible. Sin embargo, recuerde que esta propiedad no pretende alinear toda la “cuadrícula” de la página. Debe mover elementos relativamente pequeños con él; de lo contrario, puede confundirse con demasiada facilidad.

Un elemento de bloque en HTML es un elemento que, de forma predeterminada, ocupa todo el ancho de su elemento principal. El elemento principal puede ser otro elemento de bloque o una ventana del navegador. Puede establecer el ancho y el alto de un elemento de bloque utilizando las propiedades CSS. Posicionar elementos de bloque es el proceso de posicionarlos dentro de la ventana del navegador y en relación con ellos usando las propiedades CSS posición, izquierda, arriba, derecha e inferior. La propiedad de posición CSS está diseñada para establecer uno de los cuatro tipos de posicionamiento disponibles: estático (predeterminado), absoluto, fijo y relativo. Las propiedades CSS restantes, a saber, left, top, right y bottom, se utilizan para establecer distancias relativas a los bordes izquierdo, superior, derecho e inferior del elemento principal. Además, al configurar ciertas propiedades, los elementos del bloque pueden superponerse entre sí y esta función también se puede utilizar en sitios web.

Posicionamiento predeterminado (estático)

Si no especificó una posición para un elemento de bloque o especificó static , que es lo mismo, entonces los elementos del bloque se organizan en orden. Además, el siguiente bloque (por ejemplo: rojo) se encuentra en una nueva línea. Además, este posicionamiento no se ve afectado al establecer las distancias izquierda, superior, derecha e inferior.

Posicionamiento absoluto (absoluto)

Con el posicionamiento absoluto, la posición de un elemento se especifica en relación con los bordes de la ventana del navegador utilizando distancias especificadas por las propiedades left, top, right y bottom. Si especifica las distancias left y right al mismo tiempo y entran en conflicto entre sí, se dará preferencia a left , lo mismo se aplica a top y bottom , en los que la distancia top tiene prioridad. El posicionamiento absoluto se utiliza muy a menudo junto con el posicionamiento relativo con fines de diseño, cuando es necesario colocar varios elementos entre sí, también se puede utilizar para crear menús desplegables, diseño del sitio, etc.

Posicionamiento fijo

El posicionamiento fijo es diferente de otros tipos de posicionamiento y no se mueve con el contenido a medida que se desplaza por la página. Los elementos de bloque de posición fija se anclan mediante las propiedades left, top, right y bottom a los bordes de la ventana del navegador. El posicionamiento fijo se utiliza para crear interfaces de marco (la ventana del navegador se divide en varias áreas), un menú fijo, un pie de página fijo y bloques "permanentes" (lista de enlaces, botones sociales, etc.).

Posicionamiento relativo

El posicionamiento relativo se especifica especificando las distancias izquierda, superior, derecha e inferior en relación con su posición actual.

Sin embargo, esta posición de bloque también se puede crear usando la propiedad de margen.

El posicionamiento relativo no es divertido de usar por sí solo, se usa principalmente junto con el posicionamiento absoluto.

Consideremos las opciones: