web-dev-qa-db-ja.com

特定のdivがその親divの位置を無視する方法はありますか？

Divの相対位置が含まれているために位置がずれているdivがあります。親の相対的な位置を削除すると問題は修正されますが、他のものが壊れる可能性があるため、これを解決策として実装することはお勧めしません。子供に親の位置を無視させる方法はありますか？

csshtmlcss-position
13
josh

残念ながら、CSSを使用して、要素の親の相対的な位置を動的に「補正」する方法はありません。レイアウトを再考することを除けば、position:fixedはあなたが求めているものではないので、あなたの選択肢は次のとおりです。

  1. 親の位置を手動で補正します。子要素にposition:relativeを指定し、親のオフセットとは正反対のオフセットを指定します（正確な値を再度入力する必要があります）。最小限の手間ですが、2組のオフセット（親と子）を手動で同期させることを忘れないでください。 「これを変更する場合は、＃THATも変更する必要があります」というコメントを付けると役立ちます。
  2. Javascriptを使用して子を動的に移動します。レイアウトが完了した後にいくつかの計算を実行し、子要素を目的の場所に戻すことができます。少なくともクリーンなソリューションではありません。視覚的なジャンプが短時間発生する可能性があり、Javascriptが無効になっている（サイトが視覚的に壊れたままになっている）ユーザーには機能しません。唯一の利点は、レイアウトが大幅に変更されない限り、メンテナンスが不要なことです。

全体として、最善の解決策（レイアウトの変更）が利用できない場合にのみ、＃2よりも＃1を実行することをお勧めします。

14
Jon

「relative」を「static」に変更するオプションがない場合... Jonに同意します。子divを配置するには、javascriptを使用する必要があります。これは、javascriptを使用して彼の回答のオプション2を実行するコードです。ここで、すべての相対的な親の位置を考慮して、子を実際の位置に移動します。

var div = document.getElementById("banner");
var parentDiv = document.getElementById("banner");
var posT = 0;
var posL = 0;

while(parentDiv = parentDiv.offsetParent){
   posT += parentDiv.offsetTop;
   posL += parentDiv.offsetLeft;
}
posT -= div.offsetTop;
posL -= div.offsetLeft;
div.style.top = (-1)*posT+"px";
div.style.left = (-1)*posL+"px";
      .corpo{
        
                position:relative;
                margin-left:100px;
                margin_top:100px;
                background-color:yellow;
        border:#ccc 1px solid;
        padding:10px;
        
        }
        #banner{
            
                position:absolute;
        top:250px; /* inicial value - goal position considering the document reference */
        left:150px; /* inicial value - goal position considering the document reference */
            width:50px;
                height:50px;
                background-color:blue;
        font-size:9px;
        color:white;
        font-family:Arial;
        }
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
<div class="corpo">
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
        <div id="banner"  >
      <strong>Banner</strong><br/>
      top: 250px<br/> 
      left:150px
    </div>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br> 
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
</div>
0
William Hessel