FAQ: CSS Display and Positioning - Position: Absolute

#1

This community-built FAQ covers the “Position: Absolute” exercise from the lesson “CSS Display and Positioning”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Position: Absolute

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 (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 (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

#3

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?

#4

position: relative positions an element relative to where the element itself would have been if no positioning had been applied.

position: absolute, however, positions the element relative to where the parent element is currently.

I hope that answered your question!

4 Likes
#5

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.

1 Like
#6

How does the absolute value, effect sibling elements?

#7
  1. 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.

  2. 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?
#8

position-absolute

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.

1 Like