Using Positioning

• [e-mail]
• Upper Secondary (Key Stage 4)
• BTEC

Using Relative and Absolute Positioning 

In this lesson you would look and Relative and Absolute positioning to Place your Images and Text.

Watch the video and answer the following questions.

ucguk-my.sharepoint.com

div.relative { position: relatve;
width: 600px;
height: 500px;
border: 3px solid #73AD21;
What is the name of the class?

1. div
2. relative
3. Position
4. absolute

div.relative {
position: relatve;
width: 600px;
height: 500px;
border: 3px solid #73AD21;
} What is "div"

1. Divides the page s into block's
2. Justifies the page
3. Just a label
4. Nothing

Whats the difference between abolute and relate

1. Relative starts the position from where it naturally occurs on the page
2. Relative is easier
3. Not difference
4. No difference

Task 

Use the html link below to position four absolute elements into the  relative squares 

Top Left , Top Right

Bottom left  Bottom Right 

www.w3schools.com

Explain how you would apply
Relative and Absolute Positioning to you images

Implement

Plain and make  the changes 

The End 

Thank you for learning with us 

www.w3schools.com