In this exercise, you will practice using relative and static positioning in CSS to position elements on a web page.
Step 1: Create the HTML#
Create a new HTML file and add the following code to create a simple web page. Alternatively, you can use the CodePen editor to create the HTML file. In which case, you can use the CSS window to add your CSS code instead of the style element in the head element.
<!DOCTYPE html>
<html>
<head>
<title>Positioning Practice</title>
<style>
/* Add your CSS code here */
</style>
</head>
<body>
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
</body>
</html>
Step 2: Add CSS for Static Positioning#
Add CSS code to position the boxes using static positioning. The boxes should be positioned next to each other, with a 10-pixel margin between them.
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: #ccc;
display: inline-block;
text-align: center;
line-height: 100px;
}
.box1 {
/* Add your CSS for static positioning here */
}
.box2 {
/* Add your CSS for static positioning here */
}
Step 3: Add CSS for Relative Positioning#
Add CSS code to reposition the boxes using relative positioning. The first box should be moved 20 pixels to the right and 30 pixels down from its default position. The second box should be moved 50 pixels to the right and 70 pixels down from its default position.
.box1 {
position: relative;
left: 20px;
top: 30px;
}
.box2 {
position: relative;
left: 50px;
top: 70px;
}
Step 4: Test Your Code#
Save your HTML and CSS files and open the HTML file in your web browser to see the results.
You should see two boxes on the page, with the first box positioned 20 pixels to the right and 30 pixels down from its default position, and the second box positioned 50 pixels to the right and 70 pixels down from its default position.
Congratulations! You have successfully completed the exercise and practiced using both static and relative positioning in CSS.