整个窗口的绝对位置答案

【问题标题】：absolute position to whole window整个窗口的绝对位置
【发布时间】：2015-04-05 02:17:24
【问题描述】：

我有以下问题：我有一个父亲-div，那是“相对”的位置。在这个 div 里面我有 2 个子 div。第一个son-div 应该相对于father-div 定位。但第二个子 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 也相对于父亲-div 定位。有没有可能告诉son2-div，它应该继承父亲的“位置：相对”并使left和top对整个窗口绝对绝对？

我的问题是：我应该在一个非常大、很复杂的 HTML 结构中更改它，所以我无法更改 HTML 结构。

【问题讨论】：

顶部div 被归类为父级，内部的任何内容都称为子级。不是父子。可能值得注意。

标签： css window position absolute

【解决方案1】：

第一次改变

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

【讨论】：

OP提到他的#father元素是相对定位的，他无法真正改变这一点。
@DarkAshelin 抱歉，我没有看到我使用固定位置来修复它。
position: fixed; 可能不起作用，具体取决于 OP 的布局。但如果这在他的布局中很好，那将是一个简单的修复。
适用于我的特殊情况。谢谢！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

父 div 不需要使用 position: relative;
为了你的目标，son1 应该是position: relative;。
我强烈建议使用 background-color 和 width , height 来查看页面上 div 的位置。

您的代码中还有一个简单的错误：

  left:670;
  top:140;

你应该指定测量单位；

  left:670px;
  top:140px;

【讨论】：

【解决方案4】：

您应该将您的第二个儿子 div 放在父亲 div 之外。

【讨论】：

【解决方案5】：

默认情况下，您的 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 设置为 fixed

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

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

【讨论】：