Como poner un elemento al lado de otro css

Posición de la sección css

La alineación de los elementos HTML es uno de los problemas más comunes de CSS con los que se enfrentan los desarrolladores. Hay un par de maneras que CSS proporciona para posicionar elementos y tienes que decidir por ti mismo cuál usar, dependiendo de tu proyecto.

En primer lugar, puedes utilizar elementos HTML en línea y se posicionarán automáticamente uno al lado del otro, pero la restricción de los elementos en línea es que no se les pueden aplicar las propiedades de anchura y altura. Por otro lado, podemos aplicar las propiedades de anchura y altura a los elementos a nivel de bloque, pero el problema es que no pueden colocarse uno al lado del otro. Por eso, hay una tercera forma que se puede aplicar, que lleva a cambiar el comportamiento de visualización de un elemento a inline-block:

Sinceramente, depende de su proyecto. Si todo lo que quieres hacer es colocar elementos uno al lado del otro, el uso de flotadores hará el truco. Sin embargo, si su proyecto está utilizando una técnica moderna (como Flexbox, Grid, o tal vez un marco como Bootstrap, etc.) entonces el uso de flotadores puede no ser una buena idea.

Posición css: relativa a otro elemento

Si quieres crear experiencias visuales fantásticas y únicas en la web, eventualmente necesitarás que dos elementos se superpongan o existan en el mismo lugar. Incluso puede que sólo necesites que se posicionen cerca o al lado del otro. Vamos a repasar dos formas diferentes de conseguirlo, una con la propiedad position y otra con CSS Grid.

Ya debes saber que position: absolute; colocará algo absolutamente en la página donde quieras que esté. En este caso, estamos posicionando absolutamente al hijo en la parte superior izquierda de la página. No importa dónde esté el padre, el hijo se colocará en esa esquina, absolutamente.

Pero esto es muy frágil. ¿Qué pasa si colocas algo en la página y luego viene otra cosa después? Tal vez tienes un icono dentro de una navegación que siempre quieres en la esquina superior izquierda, pero un tercero viene y pone un anuncio. (No estoy defendiendo los anuncios de banner, pero existen.) Esto empuja la navegación hacia abajo y ahora el icono está fuera de lugar.

Podemos utilizar esta misma premisa si queremos apilar dos elementos uno encima del otro. Aquí, tendremos dos elementos hijos apilados uno encima del otro y separados por 150 píxeles. Veremos que ahora están contenidos en ese mismo padre y quedan posicionados dentro de él.

Elementos de la pila css

Dado un objeto jQuery que representa un conjunto de elementos del DOM, el método .next() nos permite buscar entre los hermanos inmediatamente siguientes de estos elementos en el árbol del DOM y construir un nuevo objeto jQuery a partir de los elementos que coincidan.

El método acepta opcionalmente una expresión selectora del mismo tipo que podemos pasar a la función $(). Si el hermano inmediatamente siguiente coincide con el selector, permanece en el objeto jQuery recién construido; en caso contrario, se excluye.

El resultado de esta llamada es un fondo rojo detrás del elemento 4. Como no suministramos una expresión de selector, este elemento siguiente se incluye inequívocamente como parte del objeto. Si hubiéramos suministrado una, se comprobaría la coincidencia del elemento antes de incluirlo.

Posición flotante css

Los métodos .after() e .insertAfter() realizan la misma tarea. La mayor diferencia está en la sintaxis -específicamente, en la colocación del contenido y el objetivo. Con .after(), la expresión del selector que precede al método es el contenedor tras el cual se inserta el contenido. En cambio, con .insertAfter(), el contenido precede al método, ya sea como expresión del selector o como marca creada sobre la marcha, y se inserta después del contenedor de destino.

Sin embargo, si hay más de un elemento de destino, se crearán copias clonadas del elemento insertado para cada destino después del primero, y se devolverá ese nuevo conjunto (el elemento original más los clones).

Antes de jQuery 1.9, el caso de append-to-single-element no creaba un nuevo conjunto, sino que devolvía el conjunto original, lo que dificultaba el uso del método .end() de forma fiable cuando se utilizaba con un número desconocido de elementos.