A la hora de posicionar un elemento, se toma como origen de coordenadas por defecto la esquina superior derecha. Pero en ocasiones esto no nos permite posicionar un componente en la posición que queremos, teniendo en cuenta además que en la web el tamaño de la ventana del navegador es variable.
Para solucionar esto se ha introducido a nivel de componente la propiedad Alineación, la cual nos permite posicionar un elemento en cualquier lugar de la ventana.
Los valores que puede tomar esta propiedad son:
La forma de trabajar es indicar el tipo de alineación y mediante las propiedades top y left posicionamos el componente.
A pesar de que las propiedades se llamen top y left, se referenciaran a la alineación que se haya elegido, vamos a ver las posibilidades:
- Si la alineación es Superior Izquierda, top y left se referencia a la esquina superior izquierda
- Si la alineación es Superior Centrada, top se referencia a la parte superior y left no tiene efecto
- Si la alineación es Superior Derecha, top y left se referencia a la esquina superior derecha
- Si la alineación es Media Izquierda, left se referencia a la izquierda de la pantalla y top no tiene efecto
- Si la alineación es Media Centrada, ni top ni left tienen efecto y el componente se posiciona en el centro de la ventana
- Si la alineación es Media Derecha, left se referencia a la derecha de la pantalla y top no tiene efecto
- Si la alineación es Inferior Izquierda, top y left se referencia a la esquina inferior izquierda
- Si la alineación es Inferior Centrada, top se referencia a la parte inferior y left no tiene efecto
- Si la alineación es Inferior Derecha, top y left se referencia a la esquina inferior derecha
Al poder indicar el punto sobre el cual podemos alinear un elemento, podemos posicionarlo sin preocuparnos de las dimensiones que tiene la ventana del navegador sobre el cual lo vamos a visualizar.
Por defecto, la propiedad tiene un valor Superior Izquierda.
