Como manter um elemento absolutamente posicionado diretamente sobre a posição de um inline? - javascript, jquery

Esta é uma pergunta de acompanhamento Como posso interromper o recarregamento de um IFrame quando mudo sua posição no DOM? se você quiser o fundo.

Eu tenho um div inline <div id="leaderboard-slot"></div> (com largura e altura fixas) e outro div ("leaderboard-loader") mais abaixo na página com o conteúdo real desse div.

Por vários motivos (consulte o tópico anterior), não consigo simplesmente fazer um appendChild ou semelhante.

Em vez disso, espero posicionar o carregador do placar de forma que ocupe o espaço "reservado" pelo slot do placar. Usei alguns métodos jQuery para fazer isso:

var loader = $("leaderboard-loader");
var dest = $("leaderboard-slot");
var pos = dest.getPosition();
loader.setStyle("top", pos.y + "px");
loader.setStyle("left", pos.x + "px");

que eu disparo no carregamento do documento e redimensiono. No entanto, se outros elementos na página causarem um refluxo, o div de destino se moverá, mas o carregador não.

Existe uma maneira segura de fazer isso - é precisotrabalho quando não sei mais nada sobre a página (ou seja, não posso simplesmente fazer essa chamada em quaisquer outros métodos que possam causar um refluxo, porque não sei quais são).

Qualquer ajuda seria muito apreciada - obrigado :)

Respostas:

Estou começando a me arrepender minha resposta agora. Espero que você possa encontrar algo melhor do que a solução alternativa de posicionamento absoluto. Mas, no espírito das soluções kludgey, você poderia chamar o script de reposicionamento em um cronômetro. suspiro.

Se entendi sua pergunta corretamente, não há necessidade de Javascript. Apenas coloque leaderboard-loader na frente do leaderboard-slot tag, dê position: absolute e largura e altura idênticas. Se o slot for um elemento normal, o carregador flutuará acima dele e o cobrirá perfeitamente.

<div id="leaderboard-loader"></div><div id="leaderboard-slot"></div>

Você poderia colocá-los ambos na mesma posição relativa, div de margem 0, com a div temporária indexada em z no topo do carregador lento.

Faça com que ambos estejam absolutamente posicionados no pai, não na janela, a 0: 0 e com o mesmo tamanho.

Você pode usar opacidade e fade in à medida que fade o outro, ou apenas trocar a visibilidade: oculto e visível para os dois elementos quando estiver pronto.