Guía para posicionar elementos en HTML con CSS
Cómo usar posicionamiento en CSS
Para usar el posicionamiento en un elemento, primero debes declarar su propiedad de position como absolute o relative:
H1 { position: absolute }
Luego puedes agregar las propiedades de posicionamiento que desees. Por ejemplo, el siguiente código coloca el texto de <H1> dentro de un cuadro que está a 150 píxeles desde la parte superior de la página y tiene un ancho y alto de 200 píxeles:
H1 { position: absolute; top: 150px; width: 200px; height: 200px }
Dónde acuden los desarrolladores en busca de ayuda y soluciones
Por supuesto, probablemente no quieras que todos tus elementos <H1> aparezcan en el mismo lugar. Aquí es donde los estilos en línea, los selectores ID y los elementos <DIV> y <SPAN> son útiles. Por ejemplo, este código posiciona solo el contenido de este elemento <DIV> en particular:
<DIV style=”position: absolute; top: 200px; left: 200px; width: 200px; height: 200px; background-color: red”>Este es un texto dentro de un cuadro rojo de 200 por 200 píxeles que está a 200 píxeles desde la parte superior e izquierda de la ventana.</DIV>
El posicionamiento absoluto desplaza los elementos desde los bordes de la ventana del navegador, mientras que el posicionamiento relativo coloca los elementos en el flujo del documento, es decir, los desplaza desde el elemento anterior en el código HTML. Esto te permite colocar objetos en relación entre sí sin tener que especificar exactamente dónde en la página dibujar cada objeto.
En el siguiente ejemplo, la primera línea de texto fluye normalmente a través de la página. La segunda línea, dentro de un <SPAN> que utiliza los estilos de posicionamiento delineados en el ID offset, está a 50 píxeles por debajo y 25 píxeles a la derecha del elemento que está arriba de él. (Las propiedades top y left dejan espacio arriba y a la izquierda del elemento al cual se aplica su estilo.)
<HTML>
<HEAD>
<STYLE type=”text/css”>
<!–
#offset{ position: relative;
top: 50px;
left: 25px
}
–>
</STYLE>
</HEAD>
<BODY>
Este texto fluirá normalmente a través de la página, mientras que la siguiente línea de texto estará desplazada desde el final de esta línea.
Cómo pasar de constantes de tiempo de compilación a constantes en tiempo de ejecución
<SPAN id=”offset”>Este texto está desplazado desde la línea anterior: 50 píxeles arriba y 25 píxeles a la izquierda.</SPAN>
</BODY>
</HTML>
Nota: Los ejemplos en esta página solo funcionan en navegadores de la versión 4.0 o posterior.
En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a Guía para posicionar elementos en HTML con CSS , tenemos lo ultimo en tecnología 2023.
Artículos Relacionados