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.

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