There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
So is it correct to say that using position: relative allows for moving an element in any direction with the top/bottom/left/right and position: absolute is the same thing except with respect to its parent element? How are they different?
What does the GIF relate to, exactly? I see the black border with its green and blue boxes all moving up out of frame. This doesn’t seem to correspond to either
In the example above, the .box-bottom<div> will be moved down and right from the top left corner of the view. If offset properties weren’t specified, the top box would be entirely covered by the bottom box.
or
The bottom box in this image (colored blue) is displaced from the top left corner of its container. It is 20 pixels lower and 50 pixels to the right of the top box.
I assume the blue box should be moving down-right from the dotted outline. Or that the blue box should be stationary and the black border with green box should move up out of frame behind it? I’m very unsure.
The scrolling gif, as already stateted by somebody else, does not seem relevant for this exercise.
It is mentioned, that scrolling and how it affects the different position property values, will be adressed in the next exercise. So it make no sense to have the gif scrolling here and is taking focus from the actual lesson taught here, as it is hard to tell what is actually being depicted on the image hat is scrolling up.
The lesson finishes by stating:
“The bottom box in this image (colored blue) is displaced from the top left corner of its container. It is 20 pixels lower and 50 pixels to the right of the top box.”
But isn’t the last part of that wrong?
It is moved from it’s container, yes, but from the top box?
That would be the case with relative positioning right?
The absolute value positions it in regards to its nearest parent element which would be the container (the big white box).
But this part, “It is 20 pixels lower and 50 pixels to the right of the top box.”
sounds like it is positioned in regards to the green box, which thus far has been refered to as the top box. But the green box is just another
on the same level as the box.buttom
we are currently positioning and thus not it’s parent.
Am I misunderstanding this?
The area denoted by dotted border is where the div should be positioned in normal flow. It is also where the next div in normal flow will be positioned. We’ve taken box-bottom out of normal flow.
All the divs have the same parent, the section. The top div is not a parent.
What do you mean here by where the parent element is currently? Do you mean that the element itself doesn’t move if the parent element moves?
Is this something to do with sibling elements that precede the element itself? Like absolute is about positioning the element within the parent element bounding box irrespective of what comes before or after it within the box, whereas relative just applies an offset from where the element itself would have been ie after all the proceeding elements in normal html flow?
By “currently” I meant where the element is rather than where it would have been. Sorry if that wasn’t clear.
Yeah, your summary pretty much hits it. Absolute is relative to the parent element regardless of the other elements while relatives is pretty much just an offset.
Box model seems a bit counter-intuitive. I gather it’s known for being so. On the other hand, I think the codeacademy lessons could be a lot clearer.
I’m actually going through it for the second time because having done the basic design course once, I tried to build my own website, only to discover I couldn’t make CSS do what I wanted because I’d misunderstood about half of the content of the course.
I’ve a problem understanding the relation between the box in absolute position, and the position of his closest parent’s element.
I’ve tried to do some tests by myself. Without putting any parent’s element, the box move just exactly as you said it should.
Then, I tried to add a parent’s element (a <header> section, then a <main> section with the box inside, in a <div>), but I actually can’t see any difference and I probably misunderstood something in this part… I was thinking that the box will not move set his place from the window, but from the starting of his parent’s element, the <main>, but apparently I’m wrong.
Or maybe a <main> is not really a parent’s element, as it’s just a semantic <div> ? What can I use to set a parent to my <div> ?
All sectioning elements are block level with no default margins or padding, no height, but a width of 100% of its containing parent. The body is the full width of the window, and any direct child block elements will take that width.
The semantic elements mentioned are essentially DIVs with a given name rather than having to give them an id or class. It makes then easy to hook in the style sheet, where the differentiation actually takes place.
“When you changed the position to absolute, you may have noticed that the header shrunk horizontally”, why does the header shrink to fit its content when it is set to position “absolute” or “fixed” ?
I set the position of the header to ‘absolute’, but it doesn’t scroll with the rest of the document. Am I misunderstanding “scroll with the rest of the document”, or am I not writing the code correctly?
“When you changed the position to absolute, you may have noticed that the header shrunk horizontally”, why does the header shrink to fit its content when it is set to position “absolute” or “fixed” ?
) below.
) to up-vote the contribution!
