absolute position to whole window

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.

The top `div` is classed as the parent and anything inside is called a child. Not father and son. May be worth noting that. — Ruddy, Feb 05 '15 at 10:25

score 21 · Answer 1 · edited Jul 17 '19 at 16:21

21

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>

edited Jul 17 '19 at 16:21

Vic Seedoubleyew

9,888
6
55
76

answered Feb 05 '15 at 09:42

Gildas.Tambo

22,173
7
50
78

The OP mentioned that his `#father` element is positioned relative, and that he cannot really change this. – Praxis Ashelin Feb 05 '15 at 09:44
@DarkAshelin sorry i didn't see that i use position fixed to fix it. – Gildas.Tambo Feb 05 '15 at 09:47
`position: fixed;` may not work, depending on the layout of OP. But if this is fine in his layout it would be an easy fix. – Praxis Ashelin Feb 05 '15 at 09:48
1

Worked for my particular situation. Thanks! – derpedy-doo May 14 '20 at 04:26

score 8 · Answer 2 · answered Feb 05 '15 at 09:42

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).

score 2 · Answer 3 · answered Feb 05 '15 at 11:14

2

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

answered Feb 05 '15 at 11:14

Mimi

389
4
19

score 1 · Answer 4 · answered Feb 05 '15 at 09:58

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

Jason Ching · Answer 5 · 2020-08-12T02:52:46.317

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

absolute position to whole window

5 Answers5

Related