7
respostas

Dúvida no Css- position relative x absolute

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Finalizando a página de produtos e atividade Projeto da aula anterior

por Estudante
| 99.5k xp | 10 posts
header {

    background:#BBBBBB;
    padding:20px 0;

}
.caixa{

    background:#c9e4c9;
    position:relative;
    width:940px;
    margin:0 auto;


}

nav {
    position:relative;
    top: 110px;
    right: 0;

}

O correto é deixar em nav position: absolute para que o elemento seja deslocado na página porém fiz um teste ao colocar nav position:relative e ficou logo abaixo da página saindo da div "caixa" e do header . Não compreendi isso - a posição relativa do nav neste exemplo fica fora do cabecalho e da caixa? . Por que quando coloco top o elemento desce para baixo(main) e não para cima ficando no topo em relação a posição relativa na caixa?. Obs - tb coloquei um background na class caixa para visualização e teste. Desde já agradeço pela resposta.

7 respostas
por Jefferson Carlos dos Santos Araújo
| 87.1k xp | 34 posts

Olá Kellen. Gostaria que postasse o código HTML para que o pessoal pudesse entender melhor sua dúvida.

por Estudante
| 99.5k xp | 10 posts
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Produtos-Barbearia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet"   href="style.css">

</head>
<body>

    <header>
        <div class="caixa">

             <h1><img src="logo.png"></h1>

             <nav>
                 <ul>

                     <li><a href="index.html">Home</a></li>
                     <li><a href="produtos.html">Produtos</a></li>
                     <li><a href="contato.html">Contato</a></li>

                 </ul>

            </nav> 

        </div>    

    </header>

    <main>
        <ul class="produtos">
            <li>
                <h2>Cabelo</h2>
                <img src="cabelo.jpg">
                <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
                <p class="produto-preco">R$25,00</p>

            </li>
            <li>
                <h2>Barba</h2>
                <img src="barba.jpg">
                <p class="produto-descricao">Corte e desenho profissional de barba</p>
                <p class="produto-preco">R$18,00</p>


            </li>

            <li>
                <h2>Cabelo+Barba</h2>
                <img src="cabelo+barba.jpg">
                <p class="produto-descricao">Pacote completo de cabelo e barba </p>
                <p class="produto-preco">R$35,00</p>


            </li>
        </ul>

    </main>
    <footer>
        <img src="logo-branco.png">
        <p class="copyright">© Copyright Barbearia Alura-2019</p>


    </footer>


    </body>

</html>

Então, o nav ("Home, Produtos e Contatos") ao solicitar no css nav position relative sai do header e div "Caixa " ficando logo abaixo no main. Minha dúvida é em relação a isso . Fiz a div dentro do header e ao colocar position relative os elementos saem dessa div . A position relative não deve permanecer dentro da div ou no header?. Por que quando coloco top os elementos descem e não ficam no topo da div?Qual a posição correta? .Observação :o correto é ficar nav position absolute conf o projeto ,porém quis fazer este teste para compreender melhor essa relação de position relative e absolute. Desde já agradeço pelas respostas.

por Jefferson Carlos dos Santos Araújo
| 87.1k xp | 34 posts

Olá Kellen, com o seu código conseguir testar e acho que o problema é apenas uma falta de compreensão do que o position relative e absolute faz.

Repare que se você remover a propriedade top do seletor nav lá do css ele voltará para sua posição inicial dentro do header. Essa seria a posição inicial do objeto por padrão. Quanto você põe top: 110px ele é deslocado em relação a sua posição inicial e aqui pode estar o erro. É comum acharem que o relativo é relativo a tag pai (div.caixa neste caso) porém não, relative é relativo a posição inicial do objeto. Pondo 110px a partir da posição inicial dele ele de fato acaba vazando do header.

Se quer posicionar em relação a tag pai (div.caixa) você deve declarar o nav como absolute e a tag pai como relative. E ai sim a posição estará relativa à div.caixa.

Espero ter ajudado.

por Estudante
| 99.5k xp | 10 posts
    nav{
    position:relative;

    top:900px;
    }


nav{
    position:relative;

    bottom:200px;

   }

nav{

    position:absolute;
    right:0;
    top:40px;
     } 

   nav{

    position:absolute;
    right:0;
    bottom:60px;
    }

E quando eu coloco bottom 200px na position relative o elemento sobe para cima . O termo bottom não significa para baixo e top para cima ou não necessariamente ?. Diferentemente da position absolute que ao solicitar bottom (desce) e top (sobe). Por isso , está confuso... . Ah , acho que agora eu compreendi professor!. Na position relative considera-se o "top" não o topo da página e sim o topo onde se encontra a base do elemento por isso dá a impressão que desce ... . Seria isso?. Obrigada

por Jefferson Carlos dos Santos Araújo
| 87.1k xp | 34 posts

Olá Kellen.

"E quando eu coloco bottom 200px na position relative o elemento sobe para cima . O termo bottom não significa para baixo e top para cima ou não necessariamente ?"

Então Kellen, na verdade quando você usa a propriedade bottom e define um tamanho o que você está dizendo é: "Fique a 200px de distância do bottom"

Como o posição é relativa o bottom 0 será a base do próprio objeto. Logo se ele está a 0 do bottom e você pede para ele ficar a 200px de distância do bottom ele acaba subindo.

A leitura é essa: fique a xxx distância do [bottom, top, right, left]

Para saber mais recomendo que leia este artigo da W3school https://www.w3schools.com/css/css_positioning.asp e pratique com um html simples. Como por exemplo este abaixo:

<html>
<head>
    <meta charset="UTF-8">
    <title>Testando positions</title>
    <link rel="stylesheet" href="reset.css">
    <style>
    div {width: 200px; height: 200px}
    .red {background: red}
.green {background: green}
.blue {background: blue}
    </style>

</head>
<body>

    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>

</body>
</html>

Código bem rudimentar mesmo, porém você pode testando os position e ver o que acontece. Gostaria de avisar que não faço parte do quadro de tutores da Alura, assim como você sou aluno e também já tive boa dor de cabeça com os positions, mas quando entendi me senti iluminado rsrsrsrs.

Espero ter ajudado. Qualquer dúvida só postar que o pessoal responde.

por Estudante
| 99.5k xp | 10 posts
div {
    width: 300px;
    height: 100px;
      }

.red {
    background: red;
    position:relative;
    top:20px;
    }

.green {

    background:green;
    position:relative;
    top:40px;

        }

.blue {

    background: blue;
    position:relative;
    bottom:5px;
    }

Poxa que legal Jefferson agora eu compreendi melhor . Top - conforme a medida , todo o elemento se desloca em relação ao topo . Da mesma forma o bottom - todo o elemento se desloca em relação ao ponto inicial (inferior) . Ajudou-me bastante. Obrigada.

por Jefferson Carlos dos Santos Araújo
| 87.1k xp | 34 posts

De nada. Mas caso não tenha lido o artigo da W3School recomendo que leia. Será muito útil para agregar.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software