¿Hay alguna manera fácil de entender los elementos de posicionamiento en HTML?

Una de las preguntas más frecuentes con respecto a HTML y CSS se relaciona con el posicionamiento de elementos. Sin embargo, me gustaría dividir esta pregunta en dos partes:

1. Posicionamiento de elementos de nivel de bloque como Div’s
2. Posicionamiento de elementos en línea como enlaces, listas o imágenes.

La mejor manera de entender el posicionamiento es concentrarse primero en posicionar los Div y luego pasar a los elementos en línea. Esto se vuelve más importante en el escenario actual cuando la mayoría de los sitios web son de naturaleza receptiva.

Hoy en día, la mayoría de los sitios utilizan el diseño de Flexbox para posicionar divs y para el posicionamiento de elementos en línea, a veces se usa posicionamiento absoluto y relativo.

La forma más fácil de entenderlo es practicar en varios diseños. Intenta convertir diseños psd o jpeg.

La primera pregunta que tengo es, ¿entiendes que “posicionar elementos en HTML” con un par de excepciones crudas usa CSS? Una página html se muestra de izquierda a derecha (generalmente), directamente hacia abajo de la pantalla. Si bien algunos elementos Html incluyen saltos de línea / retornos de carro, todavía no tiene mucho control sobre el posicionamiento de Html 5. En los días de los codificadores Html 3.2, las tablas anidadas comúnmente utilizadas (que ralentizan el renderizado) para aproximar algún control de los “elementos de posicionamiento”. La mayoría de los empleadores / otros desarrolladores lo desaprovecharán usando eso en estos días.

Después de haber estudiado algunos HTML y CSS, una de las razones por las que utiliza un editor de código, guarda los archivos y luego actualiza la página HTML en un navegador web es para “ver” lo que ha cambiado / movido en respuesta a su codificación de cambio (s).

También desea explorar la consola del desarrollador para su navegador web. A menudo te ayudará a “ver” en algún tipo de diagrama cómo el CSS ha modificado la expresión del HTML.

Una vez que comience a hundirse un poco, usar un marco como Bootstrap v3 acelerará la codificación para llegar al resultado que desea.

HTH

Tlm

Puedes consultar esta respuesta anterior mía.

No sé si estás preguntando en html o css. Pero hacerlo en CSS es la forma más útil y eficiente.

por ejemplo, ¿quieres posicionar una división y luego hacer esto en css

div {

posición: relativa;

flotar derecho

}

establezca la posición en relativa para que pueda alinearla en cualquier lugar de la página. y flotante se usa para alinearlo a derecha o izquierda.

Puedes aprender y usar Bootstrap. Eso también hará que su sitio sea móvil.