Força a “posição: absoluta” a ser relativa ao documento e não ao contêiner pai

96

Estou tentando inserir um div em qualquer parte do corpo e torná-lo position: absoluterelativo a todo o documento e não a um elemento pai que tenha um position: relative.

html css css-position Timothy Ruhle
fonte
Se sua posição for absoluta em relação ao documento, então ele pertence como filho da <body>tag, não?
Jim Garrison
Você viu minha solução abaixo?
tw16
Sim. Estou criando um modelo que é usado em muitas páginas e às vezes está dentro de um elemento posicionado relativamente (que não posso controlar. Agora vejo que é impossível. Obrigado pela ajuda. +1 de mim, e vou marcá-lo como correto se você disser que é impossível em sua resposta.
Timothy Ruhle
BrainJar tem uma introdução totalmente clássica ao posicionamento em CSS que esclarecerá quaisquer questões remanescentes aqui.
Alan H.

Respostas:

36

Você terá que colocar a parte divexterna do position:relativeelemento e dentro body.

tw16
fonte
1
^^ Isso. Se estiver absolutamente posicionado, não há realmente uma razão para tê-lo dentro do elemento relativamente posicionado.
DOOManiac
7
@DOOManiac - você pode desejá-lo dentro do elemento relativamente posicionado porque deseja que ele execute um script de mouseover ou não execute um script de mouseout acionado pelo pai. Minha resposta permite tal situação.
Michael.Lumley
1
@DOOManiac a razão para colocar um elemento absoluto em um elemento relativo é posicionar o div absoluto em relação ao elemento relativo. Se você deseja posicionar em relação ao corpo, o corpo por padrão é relativo, mesmo que não seja definido dessa forma.
Jason Foglia
21
Pode haver centenas de motivos pelos quais você precisa para que o contêiner seja filho de outro, mas a posição deve ser absoluta em relação ao documento. Responder como incluir diretamente no corpo está errado. A resposta correta é posição: fixa. Votos negados.
Walv
4
@walv: position:fixede position:absolutenão têm o mesmo comportamento. Fixo é relativo à janela de visualização (não ao documento) e fará com que o item esteja sempre visível, mesmo depois de rolar, potencialmente causando sobreposições, etc. Eu entendo que pode haver razões válidas para a estrutura html, mas como a questão é especificamente sobre html e css, minha resposta está correta. A única maneira sem JS de torná-lo relativo ao documento é movê-lo para fora do position:relativeelemento.
tw16
96

Você está procurando position: fixed.

Do MDN :

O posicionamento fixo é semelhante ao posicionamento absoluto, com a exceção de que o bloco que contém o elemento é a janela de visualização. Isso geralmente é usado para criar um elemento flutuante que permanece na mesma posição mesmo depois de rolar a página.

Adrian Holovaty
fonte
30
o problema com esta resposta é que o usuário queria usar absoluto porque os elementos fixos não se movem na rolagem e os elementos absolutos sim :)
Um amigo
3
Você é uma lenda absoluta.
Benisburgers
6
A questão era como posicionar em relação ao documento e não à janela de visualização
Paul Humphreys
Isso poderia causar problemas no ie11, por causa de um bug com contextos de empilhamento
James Westgate
33

Minha solução foi usar jQuery para mover a div para fora de seu pai:

<script>
    jQuery(document).ready(function(){
        jQuery('#loadingouter').appendTo("body");
    });
</script>

<div id="loadingouter"></div>
liorq
fonte
1
Isso resolveu meu problema porque eu não conseguia colocar meu elemento diretamente dentro do elemento do corpo porque estava usando páginas mestras. Obrigado!
Osprey
9

Se você não quiser anexar o elemento a body, a solução a seguir funcionará.

Cheguei a esta questão procurando uma solução que funcionasse sem anexar o div ao corpo, porque eu tinha um script de mouseover que queria executar quando o mouse estava sobre o novo elemento e o elemento que o gerou. Contanto que você esteja disposto a usar jQuery e inspirado pela resposta de @Liam William:

var leftOffset = <<VALUE>>;
var topOffset = <<VALUE>>;
$(element).css("left", leftOffset - element.offset().left);
$(element).css("top", topOffset - element.offset().top);

Esta solução funciona subtraindo a posição esquerda e superior atual do elemento (em relação ao corpo) de modo a mover o elemento para 0, 0. Colocar o elemento onde você quiser em relação ao corpo é tão simples quanto adicionar um deslocamento esquerdo e superior valor.

Michael.Lumley
fonte
2
Também vale a pena mencionar a função de posição jQueryUI .
Michael.Lumley
8

Isso não é possível simplesmente com CSS e HTML.

Usando Javascript / jQuery, você pode potencialmente obter os elementos jQuery.offset()para o DOM e compará-los jQuery.position()para calcular onde eles devem aparecer na página.

Lima
fonte
IMHO esta resposta é a mais útil - sem mover o elemento diretamente sob o corpo (o que nem sempre é possível) e sem usar a posição fixa que fará com que o elemento sempre apareça mesmo ao rolar para baixo, podemos apenas recorrer a JS. jQuery.offset({ left: 0 })para a vitória!
BornToCode