CSS absolute position orients on sibling rather than parent

Question

I am a little confused about absolute positioning right now. I have always thought that if I position an element absolutely it would be positioned relative to it's parent element (in contrast to relative to it's usual position like relative positioning). During homework I now came across this situation and I'm confused:

<body>
  <div> <!-- This is colored red in my example -->
    ...
  </div>
  <div style="position: absolute;"> <!-- This is colored green in my example -->
    ...
  </div>
</body>

What I would expect: What I got:

Of course when I set an actual position with left/right/top/bottom I get what I would expect from an absolutely positioned element. So is position: absolute just set to take the exact position it would be at without position: absolute when not specified otherwise?

If you don't reset the **top** position yep, it keep the space where he was original positioned. — DaniP, Dec 04 '17 at 17:21
Possible duplicate of [position: absolute without setting top/left/bottom/right?](https://stackoverflow.com/questions/10243991/position-absolute-without-setting-top-left-bottom-right) — alesc, Dec 04 '17 at 17:23

score 5 · Accepted Answer · edited Dec 04 '17 at 17:34

5

To clarify:

"I have always thought that if I position an element absolutely it would be positioned relative to it's parent element"

Nope. If an element has position: absolute;, it is positioned relative to the nearest parent in the DOM chain that has position: relative; or position: absolute; specified on it. If no parents have it (ie. they are all position: static, which is the default), then it is positioned relative to the document (page).

When using position: absolute, always:

Be aware of what parent you want it positioned relative to, and make sure that parent has position: relative; on it.
Specify one or more of the top/right/bottom/left attributes on the absolutely positioned object.

edited Dec 04 '17 at 17:34

dipak_pusti

1,645
2
23
42

answered Dec 04 '17 at 17:25

Morfie

670
1
7
13

1

This is not the answer the OP is looking for. He/she want's to know *why* this is not working when left/top/right/bottom is not set. Short answer: `position: absolute` has no effect when this is not set. – alesc Dec 04 '17 at 17:28
2

That isn't true. Setting position: absolute; pops the element out of the normal flow. Here is a codepen to demonstrate: https://codepen.io/morfie78/pen/mqoXem You'll see that the first element has position: absolute; on it. This pops that element out, and the second one gets moved up. If you remove position: absolute; it goes back to normal. – Morfie Dec 04 '17 at 17:39
I was just referring to another answer (which i linked as a "possible duplicate") in my comment on the question. – alesc Dec 04 '17 at 18:02

Jason Ching · Answer 2 · 2020-08-12T02:52:55.950

You are confused with the difference between position and display.

Position will change which element your element will be positioned relative to. In your case, your child div is now positioned to the body element. That's why it's on top.

Also you need to be aware that div is displayed as block, which means it will take all the width. If you want to align 2 divs left and right, the modern way is to use flexbox. The old way is float left/right.

I have made an article to explain CSS position in details:

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

CSS absolute position orients on sibling rather than parent

2 Answers2