Question

我有以下问题：我有一个父亲，这个位置是“相对的”。在这个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

＆＃13;

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

＆＃13;

<div id='father'>
 <div id='son1'></div>
 <div id='son2'></div>
</div>

＆＃13;

不需要使用position: relative;作为父div
son1应该position: relative;为你的目标。
我强烈建议您使用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位置中减去它。

Answer 6

默认情况下，您的div＃son1已定位为div＃father（静态位置）。您无需为它们设置任何位置。

#father
{
  /* don't set position.  it's static by default */
}
#son1
{
  /* don't set position.  It's positioned to #father by default */
  left:0;
  top:0;
}
#son2
{
  position:absolute;
  left:670;
  top:140;
}

<div id="father">
  <div id="son1"></div>
  <div id="son2"></div>
</div>

此外，如果要将div＃son2定位到窗口（用户可见区域）而不是根元素（主体），则应将div＃son2设置为固定

有关固定位置的更多信息，请参见此视频。

https://www.youtube.com/watch?v=nGN5CohGVTI

绝对位置到整个窗口

6 个答案: