Scribd
Upload
6 views4 pages

HTML Positioning Assignment

This document is an assignment focused on HTML and CSS positioning techniques. It outlines learning objectives, provides examples of creating and positioning div elements, and includes a student task to implement these concepts. The document also contains full code for a demonstration of the concepts taught.

Uploaded by

Audace Manzi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views4 pages

HTML Positioning Assignment

This document is an assignment focused on HTML and CSS positioning techniques. It outlines learning objectives, provides examples of creating and positioning div elements, and includes a student task to implement these concepts. The document also contains full code for a demonstration of the concepts taught.

Uploaded by

Audace Manzi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML Positioning Assignment

This page teaches only positioning in HTML and CSS.

What students should learn

How to create a div


How to give a div color and size
How to position it at the top right
How to push part of it outside the page
How to rotate it so it looks like a triangle shape

Example 1: Basic div

<div class="box">This is a div</div>

<style>
.box {
width: 150px;
height: 80px;
background: red;
}
</style>

Example 2: Top right, half outside

<div class="corner"></div>

<style>
.corner {
position: absolute;
top: -30px;
right: -30px;
width: 120px;
height: 120px;
background: orange;
}
</style>

Example 3: Rotated shape

Rotate the square so it looks like a triangle-style corner shape.

<div class="triangle-corner"></div>

<style>
body {
margin: 0;
position: relative;
}

.triangle-corner {
position: absolute;
top: -30px;
right: -30px;
width: 120px;
height: 120px;
background: orange;
transform: rotate(45deg);
}
</style>

Live Demonstration

Below is a simple example showing a rotated box in the top-right corner.


The orange shape is positioned at the top right and rotated.

Student Task

Create one HTML page that has:

1. A parent container with position: relative;


2. A child div with a background color
3. The child placed at the top right using position: absolute;
4. Negative top and right values so part of it is outside
5. transform: rotate(45deg); or another rotation

Full Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Positioning Demo</title>
<style>
body {
margin: 0;
position: relative;
height: 100vh;
}

.parent {
position: relative;
width: 100%;
height: 300px;
border: 1px solid black;
overflow: hidden;
}

.corner {
position: absolute;
top: -30px;
right: -30px;
width: 120px;
height: 120px;
background: orange;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="parent">
<div class="corner"></div>
</div>
</body>
</html>

You might also like