CSS absolute position orients on sibling rather than parent

Asked 4/12, 2017 at 17:9 Answered 7/8, 2020 at 1:7

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?

Tucky answered 4/12, 2017 at 17:9 Comment(2)

If you don't reset the top position yep, it keep the space where he was original positioned. – Bind 4/12, 2017 at 17:21

Possible duplicate of position: absolute without setting top/left/bottom/right? – Interlink 4/12, 2017 at 17:23

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.

Dawndawna answered 4/12, 2017 at 17:25 Comment(3)

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. – Interlink 4/12, 2017 at 17:28

That isn't true. Setting position: absolute; pops the element out of the normal flow. Here is a codepen to demonstrate: 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. – Dawndawna 4/12, 2017 at 17:39

I was just referring to another answer (which i linked as a "possible duplicate") in my comment on the question. – Interlink 4/12, 2017 at 18:2

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

Eben answered 7/8, 2020 at 1:7 Comment(0)

Recommended topics

Hot tags