- Position elements absolutely
Oh no! All of our kittens have escaped from the wheelbarrow and we need to get them back in. Help collect all the kittens and put them into the wheelbarrow using CSS selectors and absolute positioning.
Fork and clone this lesson into your local environment. Navigate into its directory
in the terminal, then run code . to open the files in Visual Studio Code. Finally,
run bundle to install the lab's dependencies.
There are a few different ways we can use CSS to position elements in our web pages. Absolute positioning means placing the element in its containing element in a certain location that will stay the same no matter where other elements are placed.
To get started with this lab, open index.html in the browser. Use the comments in css/place-kitty.css to write the correct selectors to move each kitty into the wheelbarrow.
Currently, the work you've done on this assignment is only on your local machine. To preserve work on your GitHub fork, you will need to stage the changes you've made, commit them, and push the commit up to GitHub. Use the following commands to do this:
git add .
git commit -m "Completed assignment"
git pushIf you visit your fork on GitHub, you should now see that you've made the most recent commit, and your solution will be present in the files.
Sometimes it takes a little bit of time to get used to how absolute positioning works, so don't worry if you have to practice. It will help you create more complex CSS layouts in the future.