CSS: ¿Por qué los elementos se desplazan entre sí sin tocarse?

Recomendaciones generales:

Normalice CSS antes de trabajar. Quién sabe con qué otros problemas se encontrará en docenas de navegadores web de escritorio y móviles. ¿Puedo sugerir sobre normalize.css – Nicolas Gallagher
Podría sugerir reemplazar box-sizing para todos los elementos como border-box o al menos saber cuál está en juego.

Posición de propiedad.

El navegador web considera primero el diseño estático y luego realiza ajustes en cuanto a la propiedad de posición.

Establecer la propiedad de position un elemento de bloque en vueltas relative en sus propiedades top , right , bottom , left e z‑index .
Los valores top , right , bottom e left son relativos a la posición estática del elemento. También puede pensar en los valores que se compensan desde la posición estática.
Establecer la propiedad de position un elemento de bloque en absolute es similar a establecerlo en relative .
Ambos habilitan las propiedades top , right , bottom , left e z‑index .

Para absolute los valores top , right , bottom e left se compensan con respecto a los límites de su antepasado posicionado más cercano. Si no hay antepasados posicionados, entonces están desplazados de los límites del elemento del body del documento.

Los valores predeterminados top , right , bottom e left se establecen en su valor posicionado estáticamente.

Puede usar las herramientas del navegador web y el diagrama de modelo de caja para ayudar con algunos de los problemas. No estoy seguro de si CodePen tiene una herramienta de este tipo, pero las herramientas del navegador web de Chrome, al igual que otras como FireFox.

Desarrollo webDiseñoHojas de estilo en cascadaweb

¿Cuáles son las ventajas de hacer desarrollo web con Python y Django?

¿Cuáles son las mejores empresas de diseño y desarrollo web? Estoy buscando empresas que realicen trabajos de diseño, desarrollo, interfaz de usuario, arquitectura, etc. para un nuevo sitio. Si las compañías estuvieran en Irlanda, eso sería genial.

¿Cómo identificar un sitio web vendible? ¿Qué es un sitio web vendible y cómo construir uno con éxito?

¿Cuál es la forma más segura de implementar una API de 'súper administrador' para su aplicación web?

¿Qué tipo de sitio web debo construir para ganar mucho dinero?

¿Es cierto que la mayoría de las aplicaciones comienzan como una versión de iOS y luego se transfieren a Android? ¿Es por eso que iOS a veces funciona mejor que otros teléfonos?

Porque estás trabajando con elementos de “nivel de bloque” (tu div). Lo que significa que nada más puede existir en el mismo espacio. Imagine legos apilados verticalmente uno encima del otro, donde comienza en la parte inferior con una pieza de 12 clavijas.

Ahora al apilarlos solo puedes tener uno por nivel. Ya sea una pieza de 2 clavijas u otra 12, o algo intermedio.

Esta es la naturaleza predeterminada de esos elementos. Sin embargo, se puede hacer que vivan en el mismo nivel, solo rodando hacia el siguiente cuando alcanza el máximo de bloques inferiores. En teoría, puede colocar 12, 1 clavija a través de piezas una al lado de la otra o 2, 6 a través o alguna combinación entre ellas hasta doce antes de que tenga que subir otro nivel.

Lo harías usando el modelo de caja o simplemente usando elementos flotantes dependiendo de la ruta que prefieras. La flotación es probablemente la más simple, mientras que el modelo de caja utiliza un enfoque mucho más receptivo al espacio vacío.

En general, lo que quieres hacer es posible, creo, pero solo tienes que profundizar un poco más en CSS y las opciones disponibles para eso.