En HTML, elementos como párrafos, imágenes, etc., se apilan uno encima del otros, como cajas en un almacén. La imagen de abajo está tomada de un navegador, y muestra tres párrafos apilados uno sobre otro. (Le hemos dado a cada uno imagina un borde para que puedas verlos mejor. Noten que los párrafos se extienden a lo largo de la página, aunque sólo tenemos unas pocas palabras de texto en cada uno.)

Posicionando Elementos con CSS

Aquí está el código HTML y CSS de la página anterior:

Posicionando Elementos con CSS

Sin embargo, puedes mover tus elementos por la página con algo llamado Posicionamiento en el CSS. Se dice que el comportamiento por defecto es en una posición estática, como los párrafos anteriores, en otras palabras, no se mueven.

Pero puedes mover elementos fuera del flujo normal y estático que se ve arriba. El primer El método que veremos se llama posicionamiento relativo.

Posicionamiento relativo

Supongamos que queremos mover el párrafo dos un poco hacia abajo en la página. Así:

Posicionando Elementos con CSS

El efecto anterior se realiza mediante la instrucción CSS posición: relativa . Luego se utilizan las propiedades top, bottom, left y right. Puedes usar las cuatro a la vez, o sólo uno, dos o tres de ellos. Aquí está el código CSS que se mueve párrafo dos de la página:

P.rel {

frontera: 1px verde sólido;
posición: relativa;
arriba: 70px;

}

Y aquí está el código HTML:

P One<
P Dos<
P Tres<P.;

Así que cada párrafo tiene una clase de CSS asociada a él. El segundo párrafo tiene Class="rel". La clase rel utiliza posición: relativa , seguida por la propiedad superior con un valor de 70 píxeles. Lo que esto hace es mover el párrafo por debajo de 70 píxeles, pero en relación a donde estaba. Así que no son 70 píxeles desde la parte superior de la ventana del navegador. Está a 70 píxeles de distancia de donde primero lo posicionó: la posición superior de 0.

Otra cosa que hay que notar aquí es que usando la posición relativa mueve el párrafo fuera de su flujo normal pero deja un hueco donde solía estar.

Posición Absoluta

Otra forma de posicionar elementos en la página es con posicionamiento absoluto. Puedes usar la posición : absoluta para colocar elementos en cualquier lugar de la página.

El posicionamiento absoluto elimina un elemento del flujo normal y estático. Otros los elementos se moverán hacia arriba para ocupar su lugar. El elemento del que acaba de salir el flujo normal es ahora como un elemento independiente. (Los bordes de la retirada se encogen para adaptarse al contenido. Si quieres más espacio tienes que especificar con propiedades de anchura y altura).

Los artículos a los que se les da una posición absoluta se colocan en relación con su progenitor elemento. Si no existe un elemento padre, el valor por defecto es la etiqueta HTML. Para ilustrar lo que esto significa, echa un vistazo a la imagen de abajo:

Posicionando Elementos con CSS

Aquí, hemos colocado un párrafo de texto en la parte superior, seguido de dos imágenes, una debajo de la otra. (etiqueta_1) Ahora echa un vistazo al código HTML:

Posicionando Elementos con CSS

El párrafo de texto tiene un estilo en línea que establece su límite en verde. Entonces tienen dos juegos de etiquetas DIV. Las rojas son las etiquetas exteriores del DIV. Piensa en estas como las etiquetas de los padres. Dentro de las etiquetas del DIV padre hay dos etiquetas interiores del DIV, la azul ...de los que... Para cada conjunto de etiquetas DIV tenemos una imagen.

Sin embargo, si estableciéramos el rectángulo azul en una posición superior de 0, ¿qué crees que pasaría? ¿A dónde se movería? Bueno, echa un vistazo a el código CSS con sólo posición: absoluta :

Posicionando Elementos con CSS

Lo primero que hemos hecho es establecer valores para las etiquetas HTML y BODY. Hemos establecer el margen a 10 píxeles y el relleno a 0. Esto es sólo para que puedas ver las imágenes más claramente.

Para el posicionamiento relativo, hemos comentado posición: relativa . Verás por qué en un momento. Para la posición absoluta, hemos comentado la valor máximo de cero. La pregunta es, si quitamos los comentarios para top: 0px ¿dónde terminará el rectángulo azul? Esto es lo que sucede en el navegador cuando hacemos justamente eso:

Posicionando Elementos con CSS

El rectángulo azul salta a la parte superior de la ventana del navegador. La razón lo hace es que su elemento padre, el DIV exterior, no tiene ninguna posición establecida. En en cuyo caso, la posición : absoluta de los tags DIV internos utiliza el HTML como padre. Así que la ventana del navegador está ahora arriba: 0px .

Cuando sacamos los comentarios para posición: relativa , sin embargo, aquí está lo que sucede:

Posicionando Elementos con CSS

El top: La posición 0px está ahora usando el DIV exterior como padre. El azul el rectángulo no puede moverse más allá de esto, así que cubre el rectángulo rosa - se coloca encima de ella.

Todo esto es bastante complicado. Así que tened en cuenta que cuando se utiliza el absoluto posicionamiento, hay que tener en cuenta el elemento padre. Si no lo haces establecer un elemento padre que utiliza la propiedad de posición CSS entonces la etiqueta HTML es usado.

Posición fija

La posición final del CSS es posición: fija . Esto es similar a la posición : absoluta en que se utiliza cuando se quiere sacar un elemento de la flujo estático normal. Por ejemplo, podrías tener una barra lateral a la izquierda de tu página usando posición: fijo . La diferencia es que las propiedades de la posición (arriba, abajo, izquierda, derecha) toman la parte superior izquierda de la ventana del navegador como su posición inicial por defecto. Además, cuando se desplaza hacia abajo de la página el elemento fijo, la barra lateral, por ejemplo, se mantendrá en su lugar. Así que si has fijado la barra lateral en la parte superior izquierda de tu página se quedará ahí cuando los usuarios se desplacen a la parte inferior de tu página.

Índice Z (etiqueta__7)

Cuando usas las propiedades de posición también tienes acceso a algo llamado el índice Z. Este es sólo el orden de apilamiento de los elementos. Así que podrías tener imágenes apiladas una encima de la otra, cada una de ellas con un desfase de unos pocos píxeles. Aquí están nuestras dos imágenes de rectángulo con un conjunto de índice Z. La rosa está en la parte superior, mientras que la El azul está detrás de él y se compensa usando las propiedades de arriba y de la izquierda:

Posicionando Elementos con CSS

Aquí está el código CSS que se utilizó:

Posicionando Elementos con CSS

El índice z por defecto se llama auto y tiene un valor de 0. Si quieres para posicionar algo detrás de un elemento, puedes usar un número negativo. Si usted quiere posicionar algo frente a otro elemento que puede usar un positivo número. Si sólo tienes dos elementos puedes usar 0 y -1. De hecho, tú puede perderse el índice Z: 0 en total, ya que esta será la posición por defecto.

Trata de no preocuparte demasiado por el índice Z. Es raro que lo necesites.

Una última cosa acerca de las propiedades de posición antes de seguir adelante: puedes usar el negativo para sus valores superiores, inferiores, izquierdos y derechos. Por ejemplo, aquí está nuestro dos rectángulos se movieron de la página a la izquierda:

Posicionando Elementos con CSS

Esto se hace simplemente estableciendo un valor izquierdo con un número negativo:

#pos_relativo {

posición: relativa;
izquierda: -50px;
Índice Z: 0;

}

Ejercicio
Experimente con los valores negativos de las otras propiedades de posición para ver qué sucede.

En la próxima lección, verás cómo usar la propiedad CSS float .

| CSS comentarios | CSS flota |;

Volver a la página de inicio