FAQ: Code Challenge: CSS Design - Position

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

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!

2

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.

2 Likes
3

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.

1 Like
4

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;
}

2 Likes
5

The blue circle

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

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.

1 Like
7

Ok, I used
#blue {
background-color: rgb(0, 0, 255);
position: absolute;
top: 100px;
}
I got them to overlap. I fully grasp why this works the way it did. Afterwards I was just playing around and moved the circle to the right with:
#blue {
background-color: rgb(0, 0, 255);
position: absolute;
top: 100px;
left:100px;
}
It did what I expected it too moved it to the side 100px.
Here is where my confusion comes in, I then changed it to “relative”
#blue {
background-color: rgb(0, 0, 255);
position: relative;
top: 100px;
left:100px;
}
and the red circle moved down the page, blue stayed in the same place…why does the red circle move when I set the blue circles position as relative?

1 Like
8

Because it is in normal flow and as a block level element takes the next available position, which is below the preceding div.

9

Screen Shot 2020-04-17 at 11.13.04 AM
Screen Shot 2020-04-17 at 11.13.04 AM3192×2696 826 KB
What can I do to pass this one?

10

What position value would we use on line 17? Here are your choices…

static
fixed
relative
absolute

Give the last one a try and see what happens.

11

thanks! what a quick response. I did try that already. My problem was that I didn’t understand from the question that codecademy expected the circles to FULLY overlap. I liked them half overlapped, so that they could be seen in their original and mixed states. I cheated to get the “answer” and continue.

1 Like
12

Yeah, the word ‘overlap’ is a bit misleading. ‘overlay’, or ‘conceal’ might be more to the point.

2 Likes
13

I didn’t realise they expected the circles on top of each other so I used position: relative and then moved each respectively with bottom: px and top: px

1 Like
14

My solution was thus, but I think the challenge wants a specific solution
////////////

.circle {

border-radius: 50%;

width: 200px;

height: 200px;

opacity: 0.5;

}

#red {

background-color: rgb(255, 0, 0);

position: relative;

top: -100px;

}

#blue {

background-color: rgb(0, 0, 255);

position: relative;

top: 100px;

}Preformatted text

15

Can I use % when I use relative/absolute/fixed position? I did try using 100% but the result was not what I expect.

If I don’t want to type the exact number but a percentage to execute the command of “gapping the whole original shape”, how can I do?

Thanks

16

Hello Codecademy Team,

I’m attending the Full-Stack-Course. Are you sure that the Code Challenge: CSS Design is in the right place? It seems to me that topics like Positioning are not yet introduced at this point.

Cheers,

Stefano

2 Likes
17

The career path modules are a number of old and new modules lumped together, one supposes on the assumption that many learners will gloss over the HTML, CSS and JavaScript units and jump right into the projects and advanced lessons.

If a lot of this is new, then suggest step back from that path for a week and pour yourself into the Learn HTML, Learn CSS, and Learn JavaScript courses. This will equip you to breeze through those units of the career path.

18

I’m exactly at the same point than arc04…
Souldn’t Codecademy work a bit on that? I mean, they are teaching us to code but apparently they are a bit lazy to correcct these thing?
I just don’t understand it

19

You would have to ask CC that. We cannot speak for them.

20

Yes, sure, I didn’t meant you guys should answer or them. I really appreciate all the help you provide.

1 Like