FAQ: Code Challenge: CSS Design - Position


This community-built FAQ covers the “Position” exercise from the lesson “Code Challenge: CSS Design”.

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

Web Development

FAQs on the exercise 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!


There are multiple ways to do this exercise I’m sure. What are some possible ways to go about it? I don’t entirely grasp how the various positioning attributes interact with each other. I think being able to see a few examples would help me understand them better. I finished this exercise but I feel like it ‘just kind of worked’, but that it wasn’t the right way.


Hi, I left the first circle (blue) as it was and thought it would be optimal to overlap the two so I changed the CSS for the second circle (red) to:

#blue {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 100px;

If you compare the HTML to CSS it’s a bit confusing as the stylesheet is written red/blue but the document is written blue/red!

Anyways, in watercolour we call these things ‘happy accidents’ and I feel the same as I go through the series on CodeAcademy - no testing framework can account for all eventualities but when learning I accept these inconsistencies as it reflects real-world situations and often makes me think more deeply about how to solve the challenge in hand.


Hi guys,

for this exercise I used this code and that works, I hope it can be helpful:

.circle {
border-radius: 50%;
width: 200px;
height: 200px;

#red {
background-color: rgba(0, 0, 255, 0.5);
position: absolute;
top: 10px;

#blue {
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
top: 10px;


The blue circle

was created first in the HTML document. So, why is the red circle displayed first in the user interface?

The style sheet has a mistake in it. They’ve given #blue the red color, and #red the blue color. Switch the colors, or swap the selectors.