web-dev-qa-db-ja.com

「位置：絶対」を、親コンテナではなくドキュメントに相対的にする

本文の任意の部分にdivを挿入し、position: absoluteを持つ親要素ではなく、ドキュメント全体に対してposition: relativeを作成しようとしています。

htmlcsscss-position
70
Timothy Ruhle

divをposition:relative要素の外側に配置し、bodyに配置する必要があります。

33
tw16

あなたが探しています position: fixed。

MDNから ：

固定配置は、要素の包含ブロックがビューポートであることを除いて、絶対配置に似ています。これは、ページをスクロールした後でも同じ位置にとどまるフローティング要素を作成するためによく使用されます。

71
Adrian Holovaty

私の解決策は、jQueryを使用してdivをその親の外に移動することでした。

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

<div id="loadingouter"></div>
31
liorq

要素をbodyにアタッチしたくない場合は、次のソリューションが機能します。

新しい要素とそれを生成した要素の両方の上にマウスが置かれたときに実行したいマウスオーバースクリプトがあるため、divをボディにアタッチしなくても機能するソリューションを探してこの質問に来ました。 jQueryを使用する意思があり、@ Liam Williamの答えに触発されている限り：

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

このソリューションは、要素を0、0に移動するために、要素の現在の左と上の位置（ボディに対して）を減算することによって機能します。値。

8
Michael.Lumley

これは、CSSとHTMLだけでは不可能です。

Javascript/jQueryを使用すると、要素jQuery.offset()をDOMに取得し、jQuery.position()と比較して、ページ上のどこに表示するかを計算できます。

6
Lime