Absolute position for the whole window

Question

I have the following problem: I have a father-deb, this position is "relative." Inside this div, I have 2 diva sons. The first div son should be located in relation to the diva father. But the second son-div should be located to the entire 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>

Run codeHide result

Now my problem is that son2-div is also positioned relative to father-div. Is there any way to tell son2-div that he should remove the "position: relative" of his father and make the left and top absolutely absolute for the whole window?

My problem: I have to change this inside a very large complex HTML structure, so I was unable to change the HTML structure.

Answer 1

, , HTML. div .

, , / #father, - #son2. #father, . , , CSS, position: absolute; on #son1 ( position: relative; #parent).

Answer 2

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

Hide result

Answer 3

.                 

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>

Hide result

• position: relative; div
• son1 position: relative; .
• background-color width, height, div .

:

  left:670;
  top:140;

;

  left:670px;
  top:140px;

Answer 5

!

/ -. son1 . "son2" "fixed", : (

, "" - - .

Another idea: I use JS for the appearance of son2-div. There I calculate the x- and y-position for the whole window (with the width / height of the window). It works, I just have problems with the relative position of my father. The div div is centered on the window, so its x-position is variable (depending on the size of the window).

So my question is: is it possible to read the x-position of the father of the div? Therefore, I could subtract it from my absolute calculated x-position.