El posicionamiento del elemento es la posición del elemento dentro de la página (sistema de coordenadas). Una página es un sistema de coordenadas. El inicio de este sistema se encuentra por defecto en la esquina superior izquierda de la página y tiene un valor de 0 a lo largo de los ejes X (horizontal) e Y (vertical).

La posición del elemento también se realiza desde el punto superior izquierdo del elemento (esquina superior izquierda del elemento) de forma predeterminada. Este punto es la posición del elemento en la página y tiene un valor digital a lo largo de los ejes X e Y.


Mover un elemento a través de la página cambiará los valores a lo largo de los ejes X e Y. También podemos cambiar la posición de referencia para el elemento. Esto significa que podemos contar la posición del elemento desde los bordes:

  • A la izquierda (a lo largo del eje X, desde la esquina superior izquierda del sistema de coordenadas, la posición predeterminada del elemento).
  • Centro (X).
  • Derecha (eje X, desde la esquina derecha del sistema de coordenadas, página).
  • Superior (a lo largo del eje Y, desde el borde superior del sistema de coordenadas, la posición predeterminada del elemento).
  • Centro (Y).
  • Parte inferior (a lo largo del eje Y, desde el borde inferior del sistema de coordenadas, página).

El control de posicionamiento le permite cambiar la posición de los elementos en la página, superponer un elemento sobre otro, determinar la posición de un elemento en relación con otro, ajustar el tamaño de un elemento, fijarlo en un punto determinado.

El posicionamiento de un elemento en una página depende del tamaño de la pantalla del visitante. Para que los elementos se muestren al colocarlos en la pantalla en la página del editor y no se hayan movido en las pantallas del usuario, use diferentes posiciones de elementos a lo largo de los ejes X e Y. Por ejemplo, los elementos que se encuentran en el lado izquierdo del sitio tienen una posición a lo largo del eje X - a la izquierda. Y los elementos que se encuentran en el lado derecho del sitio tienen una posición a lo largo del eje X, a la derecha. Esta disposición de elementos fija su posición en relación con los límites del sitio. Estos elementos se mostrarán en las diferentes pantallas de usuario de manera uniforme.


Es necesario cambiar la posición del elemento de derecha a izquierda y de arriba a abajo para ajustar la visualización de los elementos para diferentes tamaños de pantalla de usuarios.

Ancho de pantalla

Puedes ajustar el ancho de la página:

  • Automático es la parte visible del sitio para todos los tamaños de pantalla.
  • El ancho máximo es el ancho máximo posible del sitio.

Si establece el ancho de la página en "auto" entonces todos los elementos de la página se ubicarán en el área visible de la pantalla, independientemente del ancho que tenga la pantalla para el visitante. En este caso, el desplazamiento de los elementos en relación con los límites del sitio será pequeño.

Si establece el ancho de pantalla "ancho completo" entonces los elementos que se encuentran en los bordes del sitio se moverán más allá del área visible de aquellos visitantes que tienen un tamaño de pantalla pequeño.

Le recomendamos que siempre use el ancho "auto" para que todos los elementos de la página sean visibles para sus visitantes.


Píxeles y porcentajes

Puede ingresar manualmente la posición de un elemento a lo largo de los ejes X e Y. Hay dos valores posibles: píxeles y porcentajes. Puedes usar la opción que más te convenga.

Píxeles. Establece el número de píxeles a lo largo de los ejes X e Y para exponer los elementos de su página con mayor precisión en relación con los bordes u otros elementos.

Por ejemplo, establece el valor de 100 píxeles a lo largo del eje X para un elemento del icono y desea que el texto que se encuentra al lado del icono se compense también a 100 píxeles del icono. Para asegurarse de que las posiciones de estos dos elementos permanezcan precisas entre sí, establezca el valor manualmente.

Puedes cambiar la posición de un elemento moviéndolo con el mouse en la página. Pero con la ayuda de píxeles, puede configurarlo con mayor precisión.

Para mover un elemento, usa las flechas del teclado. Al hacer clic en la flecha se mueve el elemento por 1 píxel. Por lo tanto, puede ajustar con mayor precisión la ubicación del elemento en el sitio en relación con otros elementos o bordes. Si mantiene presionada la tecla "cambio", el paso de movimiento se convertirá en 10 píxeles. Seleccione un objeto, mantenga presionado en el teclado "cambio" y la flecha "arriba-abajo", "derecha-izquierda". El elemento se moverá 10 píxeles en la dirección que seleccione.

Interés. También puede especificar la posición del elemento como un porcentaje. En el campo X o Y, ingrese el número y el signo de porcentaje "%". El elemento está ubicado a lo largo del eje de tal manera que el 100% es el ancho total de la página, o la altura completa de la página, y el elemento está ubicado en la parte correspondiente de la página. Por ejemplo, si configuramos el 50%, entonces el elemento está ubicado exactamente en el centro del ancho (o altura) de la esquina superior izquierda (si el recuento está en la izquierda).

Padre

La ubicación de un elemento en una página proviene de los bordes del elemento principal, el elemento dentro del cual se encuentra otro elemento. Cuando agrega elementos de texto, ícono, título, imagen, el documento principal es la sección de la página. Si está agrupando elementos o agregando un formulario, entonces el documento principal no será una sección, sino un grupo y un formulario. Habrá varios elementos dentro del grupo y varios elementos dentro del formulario (título, campos de texto, botón).

Seleccione el grupo presionando el botón izquierdo del ratón para cambiar los elementos dentro del elemento principal. Puede moverlos, moverlos de padres a otro lugar, copiarlos y eliminarlos. Si el elemento padre no está seleccionado, entonces se moverá todo el grupo de elementos (todo el formulario).