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
“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.
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?
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?
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.
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?
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