Absolute vs Relative Positioning

HTML-CSS
1

Hello everyone!
In Applied Visual Design section I stucked in the topic “Lock an Element to its Parent with Absolute Positioning”. The thing that I don’t understand is what actually the Absolute positioning does instead of relative positioning. I created this topic because what I read here on the forum didn’t help. Also generally in the internet I didn’t find something to help me undestand.
In this section I changed the absolute positioning to relative, to see what happens. Without top, bottom, left, right stays in the same position doing nothing. But with top: 50px; and right: 50px; it changes position with relative and with absolute with the same values of top and right at 50px;
So what is the difference and what is that parent? What is parent?
I can’t understand the difference in practise…

2

Relative: stay in your static position and move relative to that position if needed
Absolute: exit document flow and stay relative to closest parent whose position is relative (if none, body)
Parent: whatever or whoever has child(ren)

3

I know the meaning of parent in general life! But in programming languages the body for example is a parent who has children like divs, paragraphs etc? Thanks for your reply!

4

Exactly.

<div class="parent">
  <div class="child"></div>
</div>
1 Like
5

Let’s say you have this:

<div class="div-parent">
  <img src="https://via.placeholder.com/150" class="image-child" />
  <div class="div-child">Some text over the image</div>
</div>

And you want to position the text over the image. You can achieve this by setting the “div-parent” div to position relative and the “div-child” to position absolute.

An item that is has position absolute determines its position depending on which closest parent item has a position of relative. In the example above, if we didn’t add a relative position to “parent” then the next closest parent item that has a position of absolute would be the <body> tag.

So, when we apply values such as bottom: 20px to the "div-child" with a position of absolute, the text will only move inside of the its parent container, which in this case is “div-parent”.

1 Like
6

For good visualization of parent/children tree you can open Elements tab from Dev tools in your browser