absolute position to whole window - css

Question

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.
My HTML and 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?
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.

Answer 1

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>

Answer 2

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.
What you could possibly do however, is change your #father element's width/height so you can still position your #son2 element correctly. This really depends on your layout and how far you can edit the #father element 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).

Answer 3

You should keep your 2nd son div outside of your father 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>
Don't need to use position: relative; for parent div
son1 should be position: relative; for your aim.
I highly suggest use background-color and width , height to see the position of div on your page.
Also there is a simple mistake in your code:
left:670;
top:140;
You should specify the measurement unit;
left:670px;
top:140px;

Answer 5

Your div#son1 is already positioned to div#father by default (static position). You don't need to set any positions to them.
#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>
Also, if you want your div#son2 to be positioned to the window (user visible area), but not the root element (body), you should set div#son2 to fixed
See this video for more details about fixed position.
https://www.youtube.com/watch?v=nGN5CohGVTI