Test your skills: Positioning
The aim of this skill test is to assess whether you understand positioning in CSS using the CSS position property and values. You will be working through two small tasks that use different elements of the material you have just covered.
Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.
If you get stuck, you can reach out to us in one of our communication channels.
Task 1
In this task, we want you to position the item with a class of target to the top and right of the container, which has the 5px grey border.
Your final result should look like the image below:
Try updating the live code below to recreate the finished example:
Additional question:
- As an extra challenge, can you change the target to display underneath the text?
Download the starting point for this task to work in your own editor or in an online editor.
Task 2
In this task, if you scroll the box in the example below, the sidebar scrolls with the content. Change it so that the sidebar stays in place and only the content scrolls.
Try updating the live code below to recreate the finished example:
Download the starting point for this task to work in your own editor or in an online editor.