CSS 整个窗口的绝对位置

absolute position to whole window

提问by user2025815

I have the following problem: I have a father-div, that's position is "relative". Inside this div I have 2 son-div's. The first son-div should be positioned relative to the father-div. But the second son-div should be positioned to the whole browser-window.

我有以下问题：我有一个父亲 div，它的位置是“相对的”。在这个 div 中，我有 2 个儿子 div。第一个子 div 应该相对于父 div 定位。但是第二个子 div 应该定位到整个浏览器窗口。

My HTML and CSS:

我的 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>

My problem now is, that the son2-div is also positioned relative to the father-div. Is there any possibility to tell the son2-div, that it should inerhit the "position:relative" of the father and make left and top absolutely absolute to the whole window?

我现在的问题是，son2-div 也相对于父亲 div 定位。有没有可能告诉son2-div，它应该inerhit父亲的“位置：相对”并使left和top对整个窗口绝对绝对？

My problem is: I should change this inside a very big, complex HTML-structure, so it's not possible for me to change the HTML-structure.

我的问题是：我应该在一个非常大、复杂的 HTML 结构中更改它，因此我不可能更改 HTML 结构。

回答by Gildas.Tambo

First change

第一次改变

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

to

到

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

Result:

结果：

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

回答by Praxis Ashelin

This is unfortunately not possible without changing the HTML structure. An absolute positioned div will always position itself according to its first relative positioned parent.

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

What you could possibly do however, is change your #fatherelement's width/height so you can still position your #son2element correctly. This really depends on your layout and how far you can edit the #fatherelement without destroying the layout. Or if possible, change your CSS so you do not need position: absolute;on #son1(after which you can remove the position: relative;from your #parent).

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

回答by Mimi

You should keep your 2nd son div outside of your father div.

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

回答by mertyildiran

#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. Don't need to use position: relative;for parent div
2. son1 should be position: relative;for your aim.
3. I highly suggest use background-colorand width, heightto see the position of div on your page.

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

Also there is a simple mistake in your code:

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

  left:670;
  top:140;

You should specify the measurement unit;

您应该指定测量单位；

  left:670px;
  top:140px;