FAQ: CSS Display and Positioning - Position: Absolute

So basically,

  • position: relative; allows us to position an element relative to where it used to be. An element with a position of relative doesn’t get taken out of the normal flow meaning even if it’s moved, its reserved space remains

  • position: absolute; allows us to position an element relative to its nearest positioned parent element. This means that if an element that has a position of absolute has a parent with a position of static, it will try and be positioned relative to its grandparent elements. This cycle continues until the element finds a parent element with a position that is not static (relative, absolute, fixed). An element with a position of absolute also gets taken out of the normal flow meaning it will be ignored by every other element

Please correct me if I’m wrong

2 Likes

Can someone clarify clearly:

When We should use absolute and when not…
I am little bit confused in this lesson

1 Like

“The element will be positioned relative to its closest positioned parent element.”
This wording confuses me, doesn’t an element only have 1 parent element by definition?
The wording makes it sound like it there are multiple parent elements, of which the one chosen is the one that the child element is closest positioned to.

1 Like

An element can have grandparents, great-grandparents, etc.

is it just me or is the lesson out of date? In the examples they show the different between positioning with a ‘dotted’ line. But I don’t see it in the lesson at all. Or am I just missing something?

2 Likes

same here, I’m having trouble with that lesson

Same I dont understand the wording

In this lesson, the h1 and p elements hide below the header and I have right now reached till “Display: Inline-Block” lesson, and both these elements are still not appearing correctly. They are overlapping. Is there something incorrect from my end?

Oh yes things got fixed in the Display: Inline-Block Lesson. Asked and answered

This is how I initially understood it, but how come in the exercise positioning the header absolute works even though its parent (the body element) isn’t positioned? Or is it because the header positions itself absolute relative to the browser?

The BODY position is static. An absolutely positioned element will be relative to that, regardless how nested in other elements IF none of them are position: relative.

1 Like

How was the code in the exercise changed? Why is the code missing used for moving the elements.

So the off-set properties were used along with the "position: absolute; "?

So this means that the position can have only one fixed value at a time from static, relative, absolute, fixed, and sticky.

The relative position would make the element move relative to the parent element.
The absolute position would make the element relative to the default positioning?

Could anyone give me an in practise example of when/why you would use the :absolute position?

When you changed the position to absolute, you may have noticed that the header shrunk horizontally. We’ll learn why in a later exercise.

I went through all the exercises in this lesson, and it wasn’t explained why this happens. Anyone know?

Place here, I’m still a confused on how to use this absolute position

Can some please give a better and more understanding explaination?

Watch this video. He explains it really well with a demonstration. CSS Positioning Tutorial #9 - Absolute Position - YouTube

Thank you, I really appreciate

1 Like

While experimenting with position: absolute in the ‘display and positioning’ lesson I noticed that if I set it to absolute without specifying any offset properites it behaves one way, but then if i apply top: 0px; it behaves differently. For context:

.question {
text-align: center;
position: absolute;
top: 0px;
} → it overlaps the header

.question {
text-align: center;
position: absolute;
} → it displays under the header

To better understand the difference between relative and absolute positioning, you can go through the Positioning - Learn web development | MDN mdn documentation.