web-dev-qa-db-ja.com

ウィンドウ全体の絶対位置

次の問題があります。father-divがあり、その位置は「相対的」です。このdiv内には2つのson-divがあります。最初のson-divは、father-divに対して相対的に配置する必要があります。ただし、2番目のson-divはブラウザウィンドウ全体に配置する必要があります。

私のHTMLとCSS：

#father
{
  position:relative;
}
#son1
{
  position:absolute;
  left:0;
  top:0;
}
#son2
{
  position:absolute;
  left:670;
  top:140;
}
<div id='father'>
 <div id='son1'></div>
 <div id='son2'></div>
</div>

私の今の問題は、son2-divもfather-divに対して相対的に配置されていることです。 son2-divに、父親の「position：relative」を無効にし、左と上をウィンドウ全体に対して絶対的に絶対にする必要があると伝える可能性はありますか？

私の問題は、非常に大きく複雑なHTML構造内で変更する必要があるため、HTML構造を変更することは不可能です。

csswindowpositionabsolute
12
user2025815

最初の変更

#son2
{
  position:absolute;
  left:670;
  top:140;
}

に

#son2
{
  position: fixed; /*change to fixed*/
  left:670px; /*add px units*/
  top:140px; /*add px units*/
}

結果：

#father
{ 
    position:relative;
    margin: 40px auto;
    width:200px;
    height: 200px;
    background: red
}
#son1
{
  position: absolute;
  left:0;
  top:0;
    
  width:20px;
    height: 20px;
    background: black
}
#son2
{
  position:fixed;
  left:70px;
  top:140px;
  width:200px;
  height: 200px;
  background: green
}
<div id='father'>
 <div id='son1'></div>
 <div id='son2'></div>
</div>
8
Gildas.Tambo

残念ながら、これはHTML構造を変更しないと不可能です。絶対位置に配置されたdivは、常に最初に相対的に配置された親に従って自分自身を配置します。

しかし、おそらくあなたができることは、あなたの#father要素の幅/高さ。これにより、#son2要素は正しく。これは実際にレイアウトと編集可能な範囲に依存します#father要素はレイアウトを破壊しません。または、可能であれば、CSSを変更して、position: absolute; オン #son1（その後、position: relative;から#parent）。

5
Praxis Ashelin

2番目の息子のdivを父親のdivの外に置いてください。

2
Mimi
#father
{
  background-color: blue;
  width: 200px;
  height: 200px;
}
#son1
{
  position:relative;
  left:0;
  top:0;
  background-color: red;
  width: 50px;
  height: 50px;
  
}
#son2
{
  position:absolute;
  left:670px;
  top:140px;
  background-color: yellow;
  width: 50px;
  height: 50px;
}
<div id='father'>
 <div id='son1'></div>
 <div id='son2'></div>
</div>
  1. 親divにposition: relative;を使用する必要はありません
  2. son1はposition: relative;である必要があります。
  3. ページ上のdivの位置を確認するには、background-colorおよびwidth、heightを使用することを強くお勧めします。

また、コードに単純な間違いがあります：

  left:670;
  top:140;

測定単位を指定する必要があります。

  left:670px;
  top:140px;
1
mertyildiran

ご回答ありがとうございます！

親要素の幅/高さを変更する必要はありません。 son1-elementはすでに正しく表示されています。 「son2」の位置を「fixed」に変更しましたが、効果はありませんでした:(

私は父親の立場を変えることはできません。父親の中に別の息子の要素があるために「相対的」が必要だからです。

別のアイデア：私はJSを使用してson2-divを表示します。そこで、ウィンドウ全体（ウィンドウ幅/高さ）のx位置とy位置を計算します。これはうまくいきます、私は父親の相対的な立場に問題があります。 father-divはウィンドウの中央に配置されるため、そのx位置は可変です（ウィンドウサイズによって異なります）。

だから私の質問：父親のdivのx位置を読み取る可能性はありますか？だから私は私の絶対的な計算されたX位置からそれを引くことができました。

0
user2025815