Entrar Ainda não tem acesso?
3
respostas

Uso do position:relative

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Posicionamento dos elementos e atividade Posicionando o cabeçalho

por Bruno
| 4.1k xp | 2 posts

Olá pessoal, beleza! Como o position :relative fez com que o menu ficasse dentro da Caixa? O professor explicou dessa forma, mas não entendi como funciona: [03:59] Quando eu quero que ele tenha um ponto absoluto, mas de dentro de alguma caixa, eu preciso que essa caixa levante, eu preciso que essa caixa também tenha um posicionamento, só que agora um posicionamento relativo, eu quero só que ela levante, position relative.

.caixa{
    position: relative;
    width: 940px;
    margin: 0 auto; /*Margem de cima e baixo 0 e esquerda e direita sera calculadad automaticamente*/
}
nav{
    position:absolute;
    top: 110px; /* ele tem 110px de espaço de distância entre o topo e ele. Esse quantidaade de px é para que o elemento fique no meio da imagem pois ela tem 240px*/
    right:100px;
}
3 respostas
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala Bruno, tudo bem?

Creio que ele quis dizer como uma metáfora, mas vou tentar te explicar um pouco melhor.

Veja a seguinte imagem:

Imagine o quadrado vermelho como a caixa, e o quadrado amarelo como o menu, o position relative posiciona um elemento em relação a ele mesmo, ou seja, aonde ele estiver ele vai ficar. Se eu colocar o seguinte código: 

.caixa {
    position: relative;
    top: 20px;
    left: 20px;
}

Essa caixa vai ficar á 20px do topo e á esquerda de onde ela estava, ou seja, ela vai descer 20px e ir 20px para á direita. Veja como ficou:

O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do elemento pai mais proximo com position relative para se posicionar. Veja um exemplo: 

.nav {
    position: absolute;
    top: 0px;
    left: 0px;
}

Nesse exemplo, o .nav ficará dentro do elemento pai com position relative mais proximo, que no nosso caso é o .caixa. Então o .nav ficará á 0px da direita e 0px do topo desse elemento. Ficando assim:

Espero que tenha entendido um pouco sobre position relative e absolute, caso ainda estiver com dúvida pode me chamar :)

por Cassiano Alves de Almeida
| 139.8k xp | 52 posts
Engenheiro Mecânico

Olá Mateus! Eu estou com a mesma dúvida do Bruno e ainda não estou 100% certo com relação ao uso do Position Relative.

Com relação ao Position Absolute, eu entendo que ele aponta a posição absoluta do elemento dentro da tela do navegador, correto?

Mas o que exatamente o Relative está fazendo para centralizar a caixa? Não teria de ser explicitado que deveria estar centralizado?

A partir deste momento, a referencia Absolute passa a tomar como referência a área da caixa?

Obrigado :)

por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala Cassiano, tudo bem?

Então, como eu expliquei, o position absolute ele fica em relação ao position relative mais proximo, ele ficou centralizado pois como o intrutor disse, a imagem tem uma certa quantidade de pixeis, então ele simplemente colocou a metade desse quantidade, assim ficando na metade, então ali ele está dizendo que ele quer ficar há 110px do topo (que naquele caso é a metade)em relação ao position relative pai.