como entender o comportamento de position:relative; e position:absolute; porque percebo que foi possível colocar os botões nas extremidades do container sem afetar outros conteudos, tudo isso graças ao ABSOLUTE?
como entender o comportamento de position:relative; e position:absolute; porque percebo que foi possível colocar os botões nas extremidades do container sem afetar outros conteudos, tudo isso graças ao ABSOLUTE?
Olá, Reinaldo! Tudo bem?
Sua percepção está certíssima. O segredo para posicionar os botões nas extremidades sem afetar o restante do layout é mesmo a combinação entre position: relative e position: absolute.
Quando você define position: relative no .carrossel, ele passa a servir como referência para os elementos posicionados como absolute dentro dele. Ou seja, qualquer elemento absoluto ali vai se orientar pelas bordas do carrossel, e não pela tela inteira.
Já os botões com position: absolute saem do fluxo normal da página. Isso significa que eles não ocupam espaço e não empurram imagens ou textos. Eles ficam “flutuando” por cima do conteúdo. Assim, você pode usar propriedades como top, left ou right para posicioná-los exatamente onde quiser dentro do carrossel. No exercício, o uso de width: 100% junto com justify-content: space-between ajudou a colocar as setas nas extremidades.
Resumindo, o relative define o limite, e o absolute permite posicionar livremente sem quebrar o layout.
Espero que tenha ficado mais claro.
Bons estudos!
Sucesso ✨