CSS proporciona propiedades de posicionamiento y flotación que le permiten crear diseños en columnas, superponer una parte de un diseño con otra y realizar tareas que durante años a menudo requerían el uso de varias tablas.
La idea básica del posicionamiento es simple, te permite definir dónde debe aparecer el cuadro de un elemento en relación con su posición normal, o en relación con un elemento padre, otro elemento o incluso la propia ventana del navegador. Evidentemente, esta característica es muy poderosa y sorprendente. No debería sorprendernos saber que los agentes de usuario soportan el posicionamiento en CSS2 mucho mejor que otros aspectos.
Los flotantes, por otro lado, se introdujeron por primera vez en CSS1 y se basaron en una característica agregada por Netscape en los primeros días de la Web. Flotar no es exactamente posicionamiento, pero ciertamente tampoco es un diseño de flujo normal. Aclararemos el significado de flotador en un capítulo posterior.
todo es un marco Un elemento div, h1 o p a menudo se denomina elemento a nivel de bloque. Esto significa que estos elementos aparecen como un bloque de contenido, un "cuadro de bloque". Por el contrario, elementos como span y strong se denominan "elementos en línea" porque su contenido aparece dentro de una línea, un "cuadro en línea".
Puede cambiar el tipo de cuadro generado utilizando la propiedad de visualización. Esto significa que puede hacer que los elementos en línea (como los elementos
) se comporten como elementos a nivel de bloque configurando la propiedad de visualización en bloque. También puede configurar la visualización en ninguna para que el elemento generado no tenga ningún cuadro. De esta forma, la caja y todo su contenido ya no son visibles y no ocupan espacio en el documento.
Pero en un caso, los elementos a nivel de bloque se crean incluso sin una definición explícita. Esto sucede cuando agrega texto al comienzo de un elemento a nivel de bloque (como un div). Aunque el texto no esté definido como párrafo, será tratado como tal:
![div css xhtml xml Ejemplo de código fuente]()
Código fuente de ejemplo
[www.downcodes.com] algún texto
Algo más de texto.
En este caso, el cuadro se denomina cuadro de bloque sin nombre porque no está asociado con un elemento específicamente definido.
Algo similar sucede con las líneas de texto de los elementos a nivel de bloque. Suponga que tiene un párrafo que contiene tres líneas de texto. Cada línea de texto forma un cuadro sin nombre. No puede aplicar estilos directamente a bloques sin nombre o cuadros de línea porque no hay lugar para aplicar estilos (tenga en cuenta que los cuadros de línea y los cuadros en línea son dos conceptos diferentes). Sin embargo, es útil comprender que todo lo que ves en la pantalla forma una especie de cuadro.
Mecanismo de posicionamiento CSS
CSS tiene tres mecanismos de posicionamiento básicos: flujo normal, flotación y posicionamiento absoluto.
Todas las cajas están ubicadas en el flujo normal a menos que se especifique lo contrario. Es decir, la posición de un elemento en una secuencia normal está determinada por la posición del elemento en X(HTML).
Los cuadros a nivel de bloque se organizan uno tras otro de arriba a abajo y la distancia vertical entre cuadros se calcula a partir de los márgenes verticales de los cuadros.
Los cuadros en línea están dispuestos horizontalmente en una fila. Su espaciado se puede ajustar mediante relleno horizontal, bordes y márgenes. Sin embargo, el relleno vertical, los bordes y los márgenes no afectan la altura del cuadro en línea. El cuadro horizontal formado por una línea se llama cuadro de línea. La altura de un cuadro de línea siempre es lo suficientemente alta para acomodar todos los cuadros en línea que contiene. Sin embargo, configurar la altura de la fila puede aumentar la altura de este cuadro.
A continuación, explicaremos en detalle el posicionamiento relativo, el posicionamiento absoluto y la flotación.
Propiedad de posición CSS
Al utilizar la propiedad de posición podemos elegir entre 4 tipos diferentes de posicionamiento, lo que afecta a cómo se genera el cuadro del elemento.
El significado del valor del atributo de posición:
estático
El cuadro de elementos se genera normalmente. Los elementos a nivel de bloque crean un cuadro rectangular como parte del flujo del documento, mientras que los elementos en línea crean uno o más cuadros de línea que se colocan dentro de su elemento principal.
relativo
El cuadro del elemento está desplazado una cierta distancia. El elemento conserva su forma no posicionada y el espacio que ocupaba originalmente.
absoluto
El cuadro del elemento se elimina completamente del flujo de documentos y se coloca en relación con su bloque contenedor. El bloque contenedor puede ser otro elemento del documento o el bloque contenedor inicial. El espacio que anteriormente ocupaba el elemento en el flujo normal de documentos se cierra, como si el elemento no existiera. El elemento genera un cuadro a nivel de bloque después del posicionamiento, independientemente del tipo de cuadro que generó originalmente en el flujo normal.
fijado
El cuadro del elemento se comporta como si estableciera la posición en absoluta, excepto que su bloque contenedor es la propia ventana gráfica.
Consejo: El posicionamiento relativo en realidad se considera parte del modelo de posicionamiento de flujo normal, porque la posición de un elemento es relativa a su posición en el flujo normal.
Propiedades de posicionamiento CSS
Las propiedades de posicionamiento CSS le permiten posicionar elementos.
Descripción de la propiedad
position coloca el elemento en una posición estática, relativa, absoluta o fija.
top define el desplazamiento entre el límite del margen superior de un elemento posicionado y el límite superior de su bloque contenedor.
right define el desplazamiento entre el borde del margen derecho del elemento posicionado y el borde derecho de su bloque contenedor.
bottom define el desplazamiento entre el límite del margen inferior del elemento posicionado y el límite inferior de su bloque contenedor.
left define el desplazamiento entre el borde del margen izquierdo del elemento posicionado y el borde izquierdo de su bloque contenedor.
overflow establece lo que sucede cuando el contenido de un elemento desborda su área.
clip establece la forma del elemento. El elemento se recorta en esta forma y luego se muestra.
vertical-align establece la alineación vertical de un elemento.
El índice z establece el orden de apilamiento de los elementos. 