Posição relativa versus absoluta?

Qual é a diferença entre position: relativee position: absoluteno CSS? E quando você deve usar qual?

Posicionamento absoluto de CSS

position: absolute;

O posicionamento absoluto é o mais fácil de entender. Você começa com a positionpropriedade CSS :

position: absolute;

Isso informa ao navegador que o que for posicionado deve ser removido do fluxo normal do documento e será colocado em um local exato na página. Não afetará como os elementos antes ou depois dele no HTML são posicionados na página da Web; no entanto, eles estarão sujeitos ao posicionamento dos pais, a menos que você os substitua.

Se você deseja posicionar um elemento a 10 pixels da parte superior da janela do documento, use o topdeslocamento positionnele com o absoluteposicionamento:

position: absolute;
top: 10px;

Esse elemento sempre será exibido 10pxna parte superior da página, independentemente do conteúdo que passa por cima ou por baixo do elemento (visualmente).

As quatro propriedades de posicionamento são:

1. top
2. right
3. bottom
4. left

Para usá-los, você precisa pensar neles como propriedades de deslocamento. Em outras palavras, um elemento posicionado right: 2pxnão é movido para a direita 2px. O lado direito é deslocado do lado direito da janela (ou sua posição substitui o pai) por 2px. O mesmo vale para os outros três.

Posicionamento relativo

position: relative;

O posicionamento relativo usa as mesmas quatro propriedades de absoluteposicionamento que o posicionamento. Mas, em vez de basear a posição do elemento na porta de visualização do navegador, ele começa de onde o elemento estaria se ainda estivesse no fluxo normal .

Por exemplo, se você tiver três parágrafos em sua página da Web e o terceiro tiver um position: relativeestilo, sua posição será deslocada com base em sua localização atual - e não nos lados originais da porta de exibição.

Parágrafo 1.

§ 2

Notas:

• o padrão widthde um elemento que está absolutamente posicionado é a largura do conteúdo dentro dele, ao contrário de um elemento que está relativamente posicionado onde o padrão widthé 100%o espaço que ele pode preencher.

• Você pode ter elementos que se sobrepõem a elementos absolutamente posicionados, enquanto que você não pode fazer isso com elementos relativamente posicionados (nativamente, ou seja, sem o uso de margens / posicionamento negativos)

lotes retirados: este recurso

Tanto o posicionamento “relativo” como o “absoluto” são realmente relativos, apenas com uma estrutura diferente. O posicionamento "absoluto" é relativo à posição de outro elemento envolvente. O posicionamento "relativo" é relativo à posição que o próprio elemento teria sem o posicionamento.

Depende de suas necessidades e objetivos, qual deles você usa. A posição "relativa" é adequada quando você deseja deslocar um elemento da posição que teria no fluxo de elementos, por exemplo, para fazer com que alguns caracteres apareçam em uma posição sobrescrita. O posicionamento "absoluto" é adequado para colocar um elemento em algum sistema de coordenadas definido por outro elemento, por exemplo, para "imprimir" uma imagem com algum texto.

Como especial, use o posicionamento "relativo" sem deslocamento (apenas configuração position: relative) para tornar um elemento um quadro de referência, para que você possa usar o posicionamento "absoluto" para os elementos que estão dentro dele (na marcação).

Outro aspecto a ser observado é que, se você deseja que um elemento absoluto seja confinado a um elemento pai, precisará definir a posição do elemento pai como relativa. Isso manterá o elemento filho contido no elemento pai e não será "relativo" à janela inteira.

Eu escrevi uma postagem de blog que fornece um exemplo simples que cria o seguinte efeito:

Que tem uma div verde que está absolutamente posicionada na parte inferior da div amarela pai.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

Posição relativa:

Se você especificar position: relative, poderá usar superior ou inferior e esquerda ou direita para mover o elemento em relação ao local em que ele normalmente ocorreria no documento.

Posição absoluta:

Quando você especifica position: absolute, o elemento é removido do documento e colocado exatamente onde você deve ir.

Aqui está um bom tutorial http://www.barelyfitz.com/screencast/html-training/css/positioning/ com o exemplo de uso de ambas as posições com o respectivo posicionamento absoluto e relativo.

Relativo: relativo à sua posição atual, mas pode ser movido. Ou Um elemento posicionado RELATIVO é posicionado em relação a ITSELF.

Absoluto: Um elemento posicionado ABSOLUTO é posicionado em relação ao PAI POSITIVO MAIS PRÓXIMO DE TI. se um estiver presente, ele funcionará como fixo ... em relação à janela.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

Aqui, a segunda divposição dos pais é relativa, portanto o meio divmuda sua posição em relação à segunda mãe div. Se a divposição do 1º pai for relativa, o Médio divmudará sua posição em relação ao 1º pai div. Detalhes

Colocando uma resposta, como minha reputação não é suficiente para comentar. Mas não olhe para isso como resposta, apenas uma informação adicional, como eu, teve alguns problemas com o rodapé e o posicionamento.

Ao configurar a página, para que meu rodapé fique sempre na parte inferior, com a posição absoluta, e o contêiner / invólucro principal com a posição relativa.

Em seguida, encontrei alguns problemas com o meu conteúdo de texto e um menu dentro do mesmo conteúdo (parte branca da página entre o cabeçalho e o rodapé), ao defini-los como absolutos, o rodapé não fica mais baixo.

A publicação é, como você diz, um tema complexo.

Minha solução, para o conteúdo que eu queria na posição 'absoluta' na minha página da Web e não ser empurrada para o lado, quando, por exemplo, abrir um menu suspenso, era realmente dar uma posição relativa à publicação e colocá-la 35em abaixo da minha lista suspensa cardápio. (35em é a altura do meu menu suspenso, quando totalmente estendido)

Em seguida, em cima: -35em, para o conteúdo que antes foi empurrado para o lado. E adicionando margem inferior: -35em. Dessa forma, o conteúdo está "abaixo" do meu menu suspenso, mas visualmente fica lado a lado com o meu menu suspenso! E o espaço em branco abaixo do rodapé tem apenas 10 em margem, como era antes de começar a brincar com isso. Então, minha solução para isso foi assim:

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

Vejo que sua pergunta foi respondida corretamente, mas, depois de muitos problemas, achei uma solução muito boa e uma maneira de entender melhor como o posicionamento funciona. Quando coloco meu conteúdo de texto, abaixo do menu suspenso, ele não aparece. t empurre meu texto para o lado. Se eu alterasse o texto para a posição absoluta, o rodapé não permaneceria no lugar. Como posso acreditar que esse é um problema para mais pessoas do que eu, adiciono aqui. O que de fato acontece é que eu coloco o texto 35ems abaixo do meu menu suspenso.

Então, visualmente, coloquei-o ao lado do outro, com posição relativa e superior: -35em; e saio à noite no imenso espaço abaixo, com margem: -35em;

valores negativos são subestimados às vezes, funcionalidade muito boa, quando se entende melhor essas posições!

Naturalmente, a posição fixa também parecia lógica para o rodapé, mas eu realmente quero que o rodapé fique abaixo da janela de visualização, se o texto ou o conteúdo for maior que a janela de visualização. E para ficar na parte inferior, se houver pouco conteúdo na página.

Este setupp corrigiu isso muito bem e lembre-se de usá-los, não 'px' para um layout de página mais fluido / dinâmico! :)

(pode haver soluções melhores, mas isso funciona para mim em várias plataformas e também em dispositivos).

Relativo vs Absoluto:

• Diferença: em relação a si mesma, em relação ao ancestral posicionado mais próximo.
• Diferença: Outros elementos ao seu redor honram sua antiga existência, Outros elementos ao seu redor NÃO honram sua antiga existência.
• Similaridade: Outros elementos ao seu redor NÃO honram sua nova existência, Outros elementos ao seu redor NÃO honram sua nova existência.

Vamos discutir um cenário para explicar a diferença entre absoluto e relativo.

Dentro do elemento body, diga que você tem um elemento de cabeçalho cuja altura é 95% da altura da vista, ou seja, 95vh. Nesse contêiner, você colocou uma imagem e reduziu sua opacidade para dizer 0,5. E agora você deseja colocar uma imagem de logotipo perto do canto superior esquerdo. Espero que você tenha entendido o cenário. Assim, você terá uma imagem mais clara na seção do cabeçalho com um logotipo na parte superior na posição especificada.

Mas antes de começar isso, eu configurei a margem e o preenchimento para 0 como este

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

Isso garante que nenhuma margem padrão e preenchimento sejam aplicados aos elementos.

Assim, você pode atingir seus requisitos de duas maneiras.

Primeira Via

• você dá uma aula para a imagem digamos logo.

• em css você escreve

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• isso colocou o logotipo nos 40 pixels da parte superior e esquerda do pai que é o cabeçalho. A imagem aparecerá como se tivesse sido colocada como desejado.

Mas, meu amigo, esse é um péssimo design para colocar uma imagem que você consumiu desnecessariamente tanto espaço, dando uma margem quando ela não era necessária. Tudo o que você precisava é colocar a imagem nesse local. Você conseguiu protegê-lo com margens ao redor. A margem ocupou espaço e aumentou o conteúdo, dando a impressão de que está posicionada exatamente onde você queria. Espero que você tenha entendido o problema, trabalhando dessa maneira. Você está ocupando mais espaço do que o necessário para colocar apenas uma imagem no local desejado.

Agora vamos tentar uma abordagem diferente.

Segunda Via

• a imagem com classe de logotipo está dentro do elemento de cabeçalho com, por exemplo, classe de cabeçalho. Portanto, a classe pai é o cabeçalho e a classe filho é o logotipo como antes.

• você define a propriedade position da classe de cabeçalho para relativa assim

  .header{ position: relative; }

• você adicionou as seguintes propriedades à classe de logotipo

  .logo{ position:absolute; top:40px; left:40px }

Ai está. Você colocou a imagem exatamente no mesmo local. Não haverá nenhuma diferença aparente no posicionamento a olho nu entre a primeira abordagem e a segunda abordagem. Mas se você inspecionar o elemento da imagem, descobrirá que ele não ocupou espaço extra. Está ocupando exatamente a mesma área, tanto quanto sua própria largura e altura.

Então, como isso é possível? Eu disse à classe do logotipo da imagem que você será colocado em relação à classe do cabeçalho como filho desta classe e que eu mencionei especificamente sua posição como relativa . Para que qualquer filho dele seja colocado em relação ao canto superior esquerdo. E que Sua posição precisa ser corrigida dentro deste elemento pai. então você recebe absoluto. E que você precisa se mover um pouco do topo e da esquerda para a posição que eu quero que você esteja. Portanto, você recebe a propriedade superior e esquerda com 40px como valor. Dessa forma, você será colocado apenas em relação aos seus pais. Portanto, se amanhã eu mover seus pais para cima ou para baixo ou em qualquer outro lugar, você sempre estará 40px na parte superior e esquerda do canto superior esquerdo do cabeçalho dos pais. Portanto, sua posição é fixa dentro de seus pais, independentemente de a posição de seus pais ser fixa ou não no futuro (pois não é absoluta como você).

Portanto, use relativo e absoluto para pai e filho, respectivamente. Em segundo lugar, use-o quando quiser colocar apenas o elemento filho em algum local dentro do elemento pai. Não use cargas como margens para empurrá-lo à força. Dê ao pai o valor relativo e o filho que você deseja mover, o valor absoluto. Especifique a propriedade superior, inferior esquerda ou direita para a classe filho para colocá-la dentro dos pais em qualquer lugar que desejar.

Obrigado.

Marco Pellicciotta: A posição do elemento dentro de outro elemento pode ser relativa ou absoluta, sobre o elemento que está dentro.

Se você precisar posicionar o elemento no ponto de vista da janela do navegador, é melhor usar position: fixed