Escrevo algo em uma das <div> e ela muda de posição. Porque?

A div muda de posição porque o seu conteúdo está mudando de tamanho. Quando você escreve algo na div, o texto é adicionado ao conteúdo da div, o que faz com que ela aumente de tamanho. Se a div não tiver espaço suficiente para acomodar o novo conteúdo, ela mudará de posição para se ajustar ao novo tamanho.

Existem algumas maneiras de fazer a div voltar à sua posição anterior, mesmo com o conteúdo dentro. Uma maneira é usar a propriedade CSS overflow. A propriedade overflow controla o que acontece com o conteúdo de um elemento quando ele ultrapassa o limite do elemento. Por exemplo, se você definir a propriedade overflow para hidden, o conteúdo do elemento será escondido quando ultrapassar o limite do elemento. Isso fará com que a div não mude de posição, mesmo com o conteúdo dentro.

Outra maneira de fazer a div voltar à sua posição anterior é usar a propriedade CSS white-space. A propriedade white-space controla o espaçamento entre as palavras em um elemento. Por exemplo, se você definir a propriedade white-space para nowrap, as palavras no elemento não serão quebradas em linhas novas. Isso fará com que a div não mude de posição, mesmo com o conteúdo dentro.

A maneira mais eficaz de fazer a div voltar à sua posição anterior é usar uma combinação das propriedades CSS overflow e white-space. Por exemplo, você pode definir a propriedade overflow para hidden e a propriedade white-space para nowrap. Isso fará com que o conteúdo do elemento seja escondido quando ultrapassar o limite do elemento e as palavras no elemento não sejam quebradas em linhas novas. Isso fará com que a div não mude de posição, mesmo com o conteúdo dentro.

Aqui está um exemplo de como usar as propriedades CSS overflow e white-space para fazer a div voltar à sua posição anterior:

div { overflow: hidden; white-space: nowrap; } Este código fará com que a div não mude de posição, mesmo com o conteúdo dentro.