3
respostas

Top de componente baseado no height de componente anterior

Boa noite, Não sei se isso é possível em css, mas eu tenho 2 textos em uma div que eu defino o top no meu CSS. Só que quando o primeiro texto é muito grande que ultrapassa o top do abaixo, um fica por cima do outro. É possível em CSS fixar o top de um componente baseado no height do componente anterior a ele? Abaixo como está o meu código hoje.

    .itemTitulo{
        top: 50px;
        left: 30px;
        font-size: 30px;
        font-weight: bold;
        width: 90%;
        height: 100px;
        margin-right: 10px;
        overflow: hidden;
    }

    .itemSubtitulo{
        top:150px;
        left: 30px;
        width: 90%;
        height: 100px;
        margin-right: 10px;
        font-size: 20px;
    }

No caso o subtítulo teria que ter o top dele baseado no "fim" do titulo + 10px. Isso é possível fazer?

3 respostas

Olá Roger,

Neste Link fiz um teste com o seu código, não sei o resto do seu código, mas acredito que acrescentando position: relative;nas duas classes resolve o seu problema, mas pode ser que dependendo do resto do seu CSS isso entre em conflito.

Mas sobre o seu código, o position: relative; irá considerar apenas o tamanho de altura que você passou, neste caso 100px, então seria interessante você retirar a altura pra deixar ele calcular automaticamente, ou usar um min-height.

EDIT

Fiz uma alteração, usando margin em vez de top/left, e usando display: inline-block; acho que resolve o seu problema ;)

Responde ai ;)

Olá Luiz,

Tentei fazer como vc disse mas não funcionou. O titulo sempre fica o mesmo tanto da margin-top da div que ele está independente do valor que eu coloco e os outros componentes da div estão se perdendo. Vou tentar postar um exemplo e te enviar aqui pra vc ver oq está acontecendo.

Da uma olhada no curso aqui mesmo da Alura de Flexbox. Ele ensina tudo sobre posicionamento de componentes.