53

Sei que um elemento dentro com posição absolute não respeita os limites da div pai e que relative respeita, e teoricamente se posiciona em relação a si.

Minhas duvidas basicamente são:

  1. Um elemento absolute deixa de respeitar apenas os limites da div pai, mas se alinha com a div anterior ou só com o body?

  2. Quando e por que usar um elemento relative dentro de um absolute (ou vice-versa)?

  3. Quando é apropriado utilizar um ou outro?

2
  • 6
    Excelente pergunta, muito comum e que eu saiba ninguém tinha perguntado isso no site ainda. Tomei a liberdade de editar para deixar a pergunta mais neutra, mais útil para outras pessoas com a mesma dúvida.
    – bfavaretto
    Commented 27/10/2014 às 4:42
  • 2
    Yes, +1. Aprendi isto, literalmente, na semana passada. E agora com estas respostas tão detalhadas, o conhecimento fica consolidado 100%. . . . [nota-ao-autor] ropbla, por favor, confira o histórico das edições que são feitas nas suas perguntas, assim você não comete os mesmos erros nas perguntas seguintes. Valeu!
    – brasofilo
    Commented 27/10/2014 às 14:29

2 Respostas 2

47
+50

Definição

A propriedade de CSS position define regras alternativas para posicionar elementos, tendo sido projetada para ser útil na criação de animações via script.

A mesma é geralmente utilizada em conjunto com outras propriedades que ajudam a deslocar o elemento ou a controlar a posição do mesmo na pilha de elementos:

  • top, right, bottom e left:

    As mesmas são utilizadas para atribuir uma distancia de forma a deslocar o elemento.

  • z-index:

    Especifica a ordem-z (posição na pilha de elementos) de um elemento e dos seus herdeiros. Quando os elementos se sobrepõem, o valor do z-index determina qual elemento cobre o outro.

Tipos de posicionamento

Existem quatro valores para a propriedade position onde cada um atribui um comportamento muito especifico ao elemento em relação ao fluxo do documento:

  • Estático: position:static

    É o valor por defeito nos elementos, onde as propriedades auxiliares para controlar o posicionamento ou controlar a posição na pilha não tem efeito nenhum.

    Ilustração elemento estático

        .estatico{
              position:static;
              top:20px;
              left:20px;
            }
            .quadrado{
              width:60px;
              height:60px;
            }
            .vermelho{
              background-color:red;
            }
            .verde{
              background-color:green;
            }
            .azul{
              background-color:blue;
            }
        <div class="quadrado verde"></div>
        <div class="quadrado vermelho estatico"></div>
        <div class="quadrado azul"></div>

  • Relativo: position:relative

    O elemento fica posicionado de forma relativa, ou seja, fica no seu lugar em relação ao fluxo do documento, mas pode ser deslocado fazendo uso das propriedades auxiliares top e left. Mesmo quando deslocado, o seu lugar no fluxo do documento é preservado.

    Ilustração elemento relativo

.quadrado{
  width:60px;
  height:60px;
}
.vermelho{
  background-color:red;
}
.verde{
  background-color:green;
}
.azul{
  background-color:blue;
}
.relativo{
  position:relative;
  top:20px;
  left:20px;
}
<div class="quadrado verde"></div>
<div class="quadrado vermelho relativo"></div>
<div class="quadrado azul"></div>
<p>Repara que o quadrado vermelho foi deslocado para o lado e para baixo mas o seu espaço "normal" está presente como se o elemento estivesse naquela zona vazia.</p>

  • Absoluto: position:absolute

    O elemento fica posicionado de forma absoluta em relação ao fluxo do documento, mas de forma relativa em relação ao seu ancestral mais próximo que também se encontre posicionado ou em relação ao documento.

    Ao contrário de um elemento com uma posição relativa, um elemento posicionado de forma absoluta não deixa espaço na fluxo do documento. Um elemento posicionado de forma absoluta está a ser deslocado para cima do fluxo do documento, como que colocado numa camada de elementos superior. A semelhança do que acontece quando usamos o z-index.

    Pode ser deslocado fazendo uso das propriedades auxiliares top, right, bottom e left, onde as mesmas indicam a distancia a ficar entre o mesmo e o elemento ancestral mais próximo que se encontre posicionado.

    Ilustração elemento absoluto

.quadrado{
  width:60px;
  height:60px;
}
.vermelho{
  background-color:red;
}
.verde{
  background-color:green;
}
.azul{
  background-color:blue;
}
.absoluto{
  position:absolute;
  top:20px;
  left:20px;
}
<div class="quadrado verde"></div>
<div class="quadrado vermelho absoluto"></div>
<div class="quadrado azul"></div>
<p>Repara que o quadrado vermelho foi deslocado para o lado e para baixo mas o seu espaço "normal" não está presente. O elemento está de facto por cima dos restantes elementos, deixando de estar no fluxo normal do documento.</p>

  • Fixo: position:fixed

    Um elemento posicionado de forma fixa fica posicionado em relação ao viewport, ou seja, em relação à tela. Também não deixa nenhum espaço para o elemento no fluxo do documento.

    Pode ser deslocado fazendo uso das propriedades auxiliares top, right, bottom e left, onde as mesmas indicam a distancia a ficar entre o mesmo e a tela.

    Se existir rolagem da página (scroll), o elemento vai sempre ficar no mesmo lugar em relação à tela, não acompanhando a deslocação da página.

    Quando impresso, um elemento fixo fica sempre no mesmo lugar em todas as páginas.

    Ilustração elemento fixo

.quadrado{
  width:60px;
  height:60px;
}
.vermelho{
  background-color:red;
}
.verde{
  background-color:green;
}
.azul{
  background-color:blue;
}
.fixo{
  position:fixed;
  top:20px;
  left:20px;
}
.relativo{
  position:relative;
}
<div class="quadrado verde"></div>
<div class="quadrado vermelho fixo"></div>
<div class="quadrado azul"></div>
<p><small>Se olharmos para o quadrado vermelho, parece estar posicionado de forma absoluta. <em>(ver exemplo anterior para melhor entendimento)</em>.</small></p>

<div class="relativo">
      <div class="quadrado verde"></div>
      <div class="quadrado vermelho fixo"></div>
      <div class="quadrado azul"></div>
      <p><small>Repara que este segundo grupo de quadrados está dentro de um elemento com posição relativa mas o quadrado vermelho não quer saber disso e está posicionado em relação à tela tendo ficado por cima do primeiro quadrado vermelho.</small></p>
</div>

Comportamentos

Os elementos posicionados introduzem dois comportamentos ao documento, em primeiro a forma como o elemento em si se irá comportar, em segundo, a forma como os seus elementos descendentes se irão comportar.

Em suma, um elemento é sempre posicionado de forma relativa ou absoluta a partir do seu ancestral mais próximo que se encontre posicionado. Vimos em cima que elementos estáticos ficam relativos à tela e não aos seus ancestrais.

Isto diz-nos também que qualquer elemento não estático vai servir de base para o posicionamento e deslocamento dos seus descendentes.

Por exemplo:

  • O elemento .filho vai ficar posicionado de forma absoluta em relação ao elemento .pai:

    .pai{
      position:relative;
    }
    .pai .filho{
      position:absolute;
    }
    
  • O elemento .filha vai ficar posicionado de forma relativa em relação ao elemento .pai:

    .pai{
      position:relative;
    }
    .pai .filha{
      position:relative;
    }
    
  • O elemento .filha vai ficar posicionado de forma relativa em relação ao elemento .pai e o elemento .filho vai ficar posicionado de forma absoluta em relação ao elemento .pai:

    .pai{
      position:absolute;
    }
    .pai .filha{
      position:relative;
    }
    .pai .filho{
      position:absolute;
    }
    
  • O elemento .neto vai ficar posicionado de forma absoluta em relação ao elemento .pai:

    .pai{
      position:absolute;
    }
    .pai .filha{
      position:static;
    }
    .pai .filha .neto{
      position:absolute;
    }
    
  • O elemento .neto vai ficar posicionado de forma absoluta em relação á tela:

    .pai{
      position:absolute;
    }
    .pai .filha{
      position:static;
    }
    .pai .filha .neto{
      position:fixed;
    }
    
43

Isso confunde muita gente porque a propriedade position define duas coisas: como o elemento se comporta em relação aos seus ancestrais na hierarquia, e como seus descendentes poderão se comportar em relação a ele.

Os princípios são:

  1. Tanto position: relative quanto position: absolute determinam contextos de posicionamento para os descendentes do elemento.

  2. Elementos com position: absolute são posicionados em relação ao contexto de posicionamento mais próximo. Por exemplo:

    <div style="position: relative">
        <div>
            <div style="position: absolute"></div>
        </div>
    </div>
    

    A terceira <div> pode ser posicionada com top e left em relação à mais externa. Se nenhum contexto de posicionamento for encontrado subindo a hierarquia, o elemento seria posicionado em relação ao <body>.

  3. Elementos com position: absolute não ocupam espaço em nenhum dos ascendentes até o contexto de posicionamento. Considerando o exemplo acima, é como se a div de dentro não existisse, tanto para a do meio, quanto para a de fora. Ela não ocupa espaço dentro das outras, não influi em sua altura ou largura. Diz-se que ela é removida do fluxo de renderização do documento.

  4. Elementos com position: relative ocupam espaço em seus ascendentes. Eles podem ser deslocados de sua posição esperada com top e left, mas esse deslocamento não influi em outros elementos no mesmo nível da hierarquia ou acima. Para os outros, é como se ele sempre estivesse sempre na posição esperada. Mas visualmente ele pode estar deslocado. Por exemplo:

    <div style="position: relative">
        <div style="height: 100px; background: red; position: relative; top: 50px"></div>
        <div style="height: 100px; background: blue"></div>
    </div>
    

    A div vermelha está a 50px do topo do contêiner, e sobre a metade superior da div azul. Ou seja, foi deslocada 50px de sua posição esperada, mas isso não moveu a div azul de lugar, ela continua "achando" que a vermelha está onde deveria. Por isso é que se diz que os elementos com position: relative são posicionados "em relação a si mesmos"; a referência para o deslocamento é sempre o próprio elemento (e não o contêiner), e para os demais elementos é como se ele não tivesse sido deslocado.

Com esses princípios, faça experimentos sobre como os elementos se comportam. Se você não quer que um elemento saia de sua posição "natural", não coloque position: absolute nele. Mas pode ser útil usar position: relative para que os elementos dentro dele se posicionem em relação a ele.

4
  • @bfavarretto, apesar de ler e reler sua resposta eu ainda não consegui entender como um elemento relative/absolute se comporta dentro de outro relative/absolute. tudo o que eu sei desde que comecei a estudar é que um absolute dentro relative se posiciona a partir do relative e não antes dele. mesmo assim não sei porque. acho que estou com um "bloqueio mental".
    – ropbla9
    Commented 30/10/2014 às 5:46
  • @ropbla9 Nem sei o que explicar mais... Os exemplos da resposta do Zuul não são mais claros pra você? Avise aqui quanto estiver online, se eu puder falamos no chat.
    – bfavaretto
    Commented 30/10/2014 às 18:03
  • @bfavaretto eu vou apagar aqui meu Comentário, fiquei em uma dúvida: Se nenhum contexto de posicionamento for encontrado subindo a hierarquia, o elemento seria posicionado em relação ao <body>. seguindo essa linha de raciocínio aqui no Fiddle minha divida vermelha deveria estar no canto superior esquerdo,ou seja em cima da primeira div verde,ou estou errado? Poderia me explicar porque não? :)
    – Marconi
    Commented 10/02/2017 às 16:20
  • @Marconi Porque top e left da div vermelha não estão definidos. Se forem, serão relativos ao canto superior esquerdo do body.
    – bfavaretto
    Commented 11/02/2017 às 17:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .