FAQ: Boundaries and Space - Working with Position

Community%20FAQs%20on%20Codecademy%20Exercises

This community-built FAQ covers the “Working with Position” exercise from the lesson “Boundaries and Space”.

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

Make a Website

FAQs on the exercise Working with Position

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!

.contact-btn a { 
  position: relative;
}

Instead of putting position attribute here , Why not put position: relative; in the .contact-btn a:active selector like this

.contact-btn a:active {
   position: relative;
  top: 2px;
}

[QUESTION]

Hi, about the example code in this lesson that reads:

.container {
  position: relative; 
  top: 10px; 
  left: 20px;
}

I was wondering about its similarities with the following:

.container {
  margin-top: 10px;
  margin-left: 20px;
}

So, is there a difference in these two ways of coding? If so, what is it?
Thanks in advance.

Cheers. David.

The first example does not change the size of the box, only shifts it right and down. If it has a parent container, it may overflow that box.

The second example does change the size of the box. It does not overflow its parent viewport.

Why does top: 2px; move the button down when clicked?

Because top: 2px is the offset from the topmost relative position. The element moves down 2 pixels.

If the effect is to make the element look jumpy then one would re-visit that design aspect in favor of something that doesn’t cause it to jump. Color change would be preferable, but then this is not about usability and accessibility. Jerkiness is not a sought after effect, by most standards.