Scribd
Upload
41 views8 pages

Understanding CSS Positioning Basics

The document discusses CSS positioning properties and how they control placement of elements on webpages. It covers static positioning as the default and topics like top, bottom, left and right properties that specify exact offsets. Examples are provided to demonstrate static positioning and how elements are positioned in normal document flow.

Uploaded by

Munna Kumar Jha
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
41 views8 pages

Understanding CSS Positioning Basics

The document discusses CSS positioning properties and how they control placement of elements on webpages. It covers static positioning as the default and topics like top, bottom, left and right properties that specify exact offsets. Examples are provided to demonstrate static positioning and how elements are positioned in normal document flow.

Uploaded by

Munna Kumar Jha
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

CSS Positions

(Part 1)

PW SKILLS
Topics Covered
● What is CSS Position?
● Why to use CSS Position?
● Top, Bottom, Left and Right properties
● Static Positioning

PW SKILLS
What is CSS Position?
Process of controlling the Placement of Elements on a webpage.

PW SKILLS
Position Properties - Top, Left, Right, Bottom
Used in conjunction with the position property to specify the exact offset location of an element on
a webpage.

Top : Offset from top edge of the element.


Bottom : Offset from bottom edge of the element.
Left : Offset from left edge of the element.
Right : Offset from right edge of the element.

PW SKILLS
Static Positioning
Default position for all HTML elements.

Elements are positioned based on the normal document flow,

PW SKILLS
Example
HTML CSS Output

<body> <style>
<div class="container"> .container {
<div class="box box1"></div> border: 2px solid black;
<div class="box box2"></div> height: 500px;
<div class="box box3"></div> width: 500px;
</div> }
</body> .box {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: green;
position: static;
top: 50px;
}
.box3 {
background-color: blue;
}
</style>

PW SKILLS
Why to use CSS Position?
● Control over element position
● Positioning relative to other elements or viewport.
● Removing elements from document flow
● Create scroll effect
● Overlapping elements
● Accessibility

PW SKILLS
THANK YOU

PW SKILLS

You might also like