Lecture Notes of Class
12: Positioning Elements
Objective
By the
end of this class, students will:
1.
Understand how the CSS position property works.
2.
Learn about different position values: static, relative, absolute, fixed, and sticky.
3.
Be able to position elements on a
webpage effectively.
Introduction
When
building web pages, we often need to control where elements appear on the page.
CSS provides a property called position
that helps us position elements in different ways relative to the page or to
other elements.
CSS position
Property
The position property
specifies how an element is positioned in a document. It has several values:
1.
static (default)
2.
relative
3.
absolute
4.
fixed
5.
sticky
Each of
these behaves differently. Let's explore them one by one.
1.
position: static
- This
is the default position for all elements.
- Elements
with
position: staticare placed in the normal document flow. - You
cannot use
top,right,bottom, orleftproperties withstaticpositioning because the element stays where it naturally occurs in the document.
Example:
html<style> .box { width: 100px; height: 100px; background-color: lightblue; position: static; }</style> <div class="box">Static Position</div>
In this
example, the div
will appear in the normal document flow.
2.
position: relative
- Elements
with
position: relativeare positioned relative to their normal position in the document flow. - The
element stays in the flow, but you can adjust its position using
top,right,bottom, orleft. - The
space it would have occupied remains reserved.
Example:
html<style> .box { width: 100px; height: 100px; background-color: lightgreen; position: relative; top: 20px; /* Moves 20px down */ left: 30px; /* Moves 30px to the right */ }</style> <div class="box">Relative Position</div>
- The
element moves 20px down and 30px to the right
but does not disturb other elements' layout.
3.
position: absolute
- Elements
with
position: absoluteare positioned relative to their nearest positioned ancestor (relative,absolute,fixed). - If
no positioned ancestor exists, the element will be positioned relative to
the
<html>document. - The
element is removed from the document flow, meaning other
elements ignore its presence.
Example:
html<style> .container { position: relative; width: 200px; height: 200px; border: 2px solid black; } .box { width: 100px; height: 100px; background-color: orange; position: absolute; top: 10px; left: 10px; }</style> <div class="container"> <div class="box">Absolute Position</div></div>
- The
boxwill be positioned 10px down and 10px to the right relative to the.containerbecause the.containerhasposition: relative.
4.
position: fixed
- Elements
with
position: fixedare positioned relative to the browser window. - Fixed
elements do not move when the user scrolls the page.
- The
element is removed from the normal document flow.
Example:
html<style> .box { width: 100px; height: 100px; background-color: pink; position: fixed; top: 10px; right: 10px; }</style> <div class="box">Fixed Position</div>
- The
boxwill always remain 10px down and 10px to the right from the top-right corner of the browser window, even when you scroll the page.
5.
position: sticky
- Sticky
positioning is a mix of
relativeandfixedpositioning. - An
element with
position: stickybehaves likerelativeuntil the user scrolls to a certain point, at which it becomes fixed. - It
is positioned relative to its nearest scrollable container.
Example:
html<style> .header { width: 100%; background-color: lightcoral; position: sticky; top: 0; /* Sticks at the top */ padding: 10px; text-align: center; }</style> <div class="header">Sticky Header</div><p>Scroll down to see the effect.</p><p style="height: 2000px;">Content goes here...</p>
- The
.headerwill remain at the top of the viewport (fixed) as you scroll, but only when it reaches the top.
Comparison Table
|
Position
Value |
Description |
Behavior |
|
|
Default positioning |
Follows normal
document flow |
|
|
Relative to its
normal position |
Moves but keeps its
original space |
|
|
Relative to
positioned ancestor |
Removed from flow;
does not affect sibling elements |
|
|
Relative to the
viewport |
Stays fixed even when
scrolling |
|
|
Relative, then fixed
when scrolling |
Sticks to a defined
point in the scrollable container |
Lab Exercise
Task:
Create a Webpage with Fixed, Sticky, and Relative Elements
Instructions:
1.
Create a container <div> with a header,
content, and footer.
2.
Add the following:
o A
fixed header that stays at the top when scrolling.
o A
sticky element inside the content section.
o A
relative box positioned within the content.
Code Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Positioning Elements</title> <style> body { margin: 0; font-family: Arial, sans-serif; } .header { background-color: lightblue; color: white; padding: 10px; position: fixed; top: 0; width: 100%; text-align: center; } .content { margin-top: 60px; padding: 10px; height: 1200px; } .sticky-box { background-color: lightgreen; padding: 10px; position: sticky; top: 10px; } .relative-box { background-color: lightcoral; width: 200px; height: 100px; position: relative; top: 20px; left: 30px; } .footer { background-color: gray; color: white; padding: 10px; text-align: center; } </style></head><body> <div class="header">Fixed Header</div> <div class="content"> <div class="sticky-box">Sticky Box (Scroll down to see me stick!)</div> <div class="relative-box">Relative Box</div> </div> <div class="footer">Footer Section</div></body></html>
Summary
- The
positionproperty allows us to place elements in specific locations on the webpage. - Each
value (
static,relative,absolute,fixed, andsticky) has unique behavior. - Understanding
these concepts is essential for creating layouts and positioning elements.
No comments:
Post a Comment