Position: Relative

e.g: 1


➡️ `right: 50%;` works, but tentar evitar a menos que queira o elemento saindo fora do fluxo, vai ser jogado para direita.

geraldo Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dicta, eum error suscipit sai fora do limite da page usando right: 50% obcaecati atqued, voluptatum a laborum molestias excepturi nostrum quod adipisci architecto repellendus culpa soluta minima ipsum ad!

➡️ usar width para controlar a largura caso contrário vai sair muito do fluxo

width: 50%; left: 50%;

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dicta, eum error suscipit obcaecati atque, voluptatum a laborum molestias excepturi nostrum quod adipisci architecto repellendus culpa soluta minima ipsum ad!

➡️ se tem 10% sobrando na tela, usando com left`left: 10%; width: 90%;`

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dicta, eum error suscipit obcaecati atque, voluptatum a laborum molestias excepturi nostrum quod adipisci architecto repellendus culpa soluta minima ipsum ad!

➡️ Centralizando`left: 20%; width: 60%;`

100% - 60% sobra 40%, left: 20%
Calculando medidas

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dicta, eum error suscipit obcaecati atque, voluptatum a laborum molestias excepturi nostrum quod adipisci architecto repellendus culpa soluta minima ipsum ad!

➡️

width: 77%; margin: 0 auto;

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dicta, eum error suscipit obcaecati atque, voluptatum a laborum molestias excepturi nostrum quod adipisci architecto repellendus culpa soluta minima ipsum ad!


➡️ eg:

top: 50px; left: 50px
primeira div
Segunda div relative
Terceira div

➡️ eg

Static

Relative 1 - top: 100px

Relative 2