绝对位置到整个窗口

Question

我有以下问题：我有一个父亲div，这个位置是“相对的”。在这个div里面我有2个儿子。第一个son-div应该相对于father-div定位。但是第二个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，它应该能够完成父亲的“位置：相对”，并使左侧和顶部对整个窗口绝对绝对？

我的问题是：我应该在一个非常大的，复杂的HTML结构中改变它，所以我不可能改变HTML结构。

Answer 1

遗憾的是，如果不改变HTML结构，这是不可能的。绝对定位的div将始终根据其第一个相对定位的父级来定位自身。

然而你可以做的是改变你的#father元素的宽度/高度，这样你仍然可以正确定位你的#son2元素。这实际上取决于您的布局以及在不破坏布局的情况下编辑#father元素的距离。或者如果可能的话，更改你的CSS，这样你就不需要在position: absolute;上使用#son1（之后你可以从你的position: relative;中删除#parent）。

Answer 2

#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>

第一次改变

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

至

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

Answer 3

你应该把你的第二个儿子div留在你父亲的div之外。

Answer 4

#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. 不需要使用position: relative;作为父div
2. son1应该是position: relative;为您的目标。
3. 我强烈建议使用background-color和width，height来查看你页面上div的位置。

你的代码中也有一个简单的错误：

  left:670;
  top:140;

你应该指定测量单位;

  left:670px;
  top:140px;

Answer 5

谢谢您的回答！

无需更改父元素的宽度/高度。 son1元素已经显示正确。我现在将“son2”的位置改为“固定”，但它没有效果:(

我不能改变父亲的立场，因为父亲内部的另一个儿子元素需要“亲戚”。

另一个想法：我使用JS来出现son2-div。在那里，我计算整个窗口的x和y位置（窗口宽度/高度）。这有效，我只是遇到父亲的亲戚位置的麻烦。 father-div以窗口为中心，因此它的x位置是可变的（取决于窗口大小）。

所以我的问题是：有没有可能读出父亲的div的x位置？所以我可以从我绝对计算的x位置中减去它。