Apply Relative Positioning in CSS

Introduction

In this lab, you will learn how to apply relative positioning in CSS by creating a web layout with two images. The lab guides you through setting up an HTML project structure, creating a basic CSS stylesheet, and implementing relative positioning techniques for image placement.

You'll start by creating a project directory, initializing an HTML file with image placeholders, and downloading sample images. Then, you'll develop a CSS stylesheet to define the layout and positioning of these images using relative positioning, which allows you to adjust the position of elements relative to their normal document flow without affecting other elements' layouts.

Set Up HTML Project Structure

In this step, you'll set up the basic HTML project structure for learning CSS relative positioning. We'll create a simple project directory and initialize the necessary files for our web layout experiment.

First, navigate to the project directory:

cd ~/project

Create a new directory for our CSS positioning project:

mkdir css-positioning
cd css-positioning

Now, create the basic project files using the WebIDE:

Create an HTML file named index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Relative Positioning</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <img src="left-image.jpg" alt="Left Image" class="left-image" />
      <img src="right-image.jpg" alt="Right Image" class="right-image" />
    </div>
  </body>
</html>

Download sample images for the project:

wget https://labex.io/sample-left-image.jpg -O left-image.jpg
wget https://labex.io/sample-right-image.jpg -O right-image.jpg

Example output:

--2024-xx-xx xx:xx:xx--  https://labex.io/sample-left-image.jpg
Resolving labex.io (labex.io)...
Downloading sample images...

This setup creates a basic HTML structure with placeholders for images and prepares the project for CSS positioning experiments in the following steps.

Create Basic CSS Stylesheet

In this step, you'll create a basic CSS stylesheet to set up the foundational styles for your web page. CSS (Cascading Style Sheets) allows you to control the layout, appearance, and positioning of HTML elements.

Navigate to the project directory:

cd ~/project/css-positioning

Create a new CSS file named styles.css in the WebIDE:

/* Basic reset and container styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  border: 2px solid #333;
  padding: 20px;
}

/* Initial image styles */
.left-image,
.right-image {
  width: 200px;
  height: auto;
  border: 1px solid #666;
}

Let's break down the CSS:

The * selector applies a reset to remove default margins and paddings
.container creates a centered container with a border
.left-image and .right-image set initial image sizes and add a border

Example output when viewing in a browser:

[A centered container with a border, containing two images of equal size]

This basic stylesheet provides the foundation for our relative positioning experiment. In the next steps, we'll modify these styles to demonstrate relative positioning techniques.

Implement Relative Positioning for Left Image

In this step, you'll learn how to use relative positioning to move the left image within its original document flow. Relative positioning allows you to adjust an element's position relative to its normal position without affecting other elements.

Open the styles.css file in the WebIDE and add the following CSS for the left image:

.left-image {
  position: relative;
  top: 20px; /* Move 20 pixels down */
  left: 50px; /* Move 50 pixels to the right */
  background-color: #f0f0f0; /* Add a light background for visibility */
}

Key points about relative positioning:

position: relative; enables relative positioning
top moves the element downward
left moves the element to the right
The element's original space is preserved
Other elements are not affected by this movement

Example visual output:

[Left image shifted 20px down and 50px right,
 maintaining its original layout space]

The relative positioning allows you to fine-tune element placement without disrupting the overall page layout.

Implement Relative Positioning for Right Image

In this step, you'll apply relative positioning to the right image, demonstrating how to move elements independently using CSS. We'll use different positioning values to show the flexibility of relative positioning.

Open the styles.css file in the WebIDE and add the following CSS for the right image:

.right-image {
  position: relative;
  bottom: 30px; /* Move 30 pixels up */
  right: -40px; /* Move 40 pixels to the left */
  background-color: #e0e0e0; /* Add a light background for visibility */
}

Key differences in positioning:

bottom moves the element upward
right with a negative value moves the element to the left
The image maintains its original layout space
Other elements are not affected by this movement

Example visual output:

[Right image shifted 30px up and 40px left,
 maintaining its original layout space]

This example demonstrates how you can use different positioning properties to fine-tune element placement using relative positioning.

Verify Positioning and Layout

In this final step, you'll review and verify the relative positioning techniques applied to the images. We'll add some final touches to enhance the visual understanding of how relative positioning works.

Update the styles.css file with a complete styling to highlight the positioning:

.container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  border: 2px solid #333;
  padding: 20px;
  text-align: center;
}

.left-image,
.right-image {
  width: 200px;
  height: auto;
  border: 3px solid #666;
  transition: transform 0.3s ease;
}

.left-image {
  position: relative;
  top: 20px;
  left: 50px;
  background-color: #f0f0f0;
}

.right-image {
  position: relative;
  bottom: 30px;
  right: -40px;
  background-color: #e0e0e0;
}

/* Add hover effect to visualize positioning */
.left-image:hover,
.right-image:hover {
  transform: scale(1.05);
}

Key verification points:

Images are positioned relative to their original locations
Container maintains a consistent layout
Hover effects help visualize positioning

Example visual output:

[Two images positioned differently within a centered container,
 with subtle hover effects to highlight their positions]

This final styling demonstrates the power of relative positioning in creating flexible and dynamic layouts.

Summary

In this lab, participants learned how to apply CSS relative positioning by creating a structured web project from scratch. The process involved setting up an HTML project directory, creating an index.html file with image placeholders, and downloading sample images to demonstrate positioning techniques.

The lab guided learners through creating a basic CSS stylesheet, establishing foundational styling principles, and preparing the groundwork for implementing relative positioning for left and right images. By following the step-by-step instructions, participants gained practical experience in managing web layout elements and understanding how CSS positioning can be used to control the placement of images within a container.