Scribd
Upload
56 views

Lesson 5 CSS Positioning

This document discusses CSS layout and positioning properties. It explains the four position values: static, relative, fixed, and absolute. Static is the default and is not affected by top, bottom, left, right properties. Relative is positioned relative to its normal position and other elements are not adjusted. Fixed is positioned relative to the viewport and does not change with scrolling. Absolute is positioned relative to the nearest positioned ancestor. It also discusses z-index for overlapping elements and stacking order. There are examples and a quiz provided.

Uploaded by

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

Lesson 5 CSS Positioning

This document discusses CSS layout and positioning properties. It explains the four position values: static, relative, fixed, and absolute. Static is the default and is not affected by top, bottom, left, right properties. Relative is positioned relative to its normal position and other elements are not adjusted. Fixed is positioned relative to the viewport and does not change with scrolling. Absolute is positioned relative to the nearest positioned ancestor. It also discusses z-index for overlapping elements and stacking order. There are examples and a quiz provided.

Uploaded by

Helen Asuncion
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

UNDERSTANDING CSS:

The CSS Layout:


Position Property
CSS Layout- Position Property
The position property specifies the
type of positioning method used for
an element (static, relative, fixed
or absolute).

There are four different position values:


• Static
• Relative
• Fixed
• Absolute
position: static;
HTML elements are positioned static by
default.
Static positioned elements are not affected
by the top, bottom, left, and right
properties.
An element with position: static; is not
positioned in any special way; it is always
positioned according to the normal flow of
the page:
This <div> element has position: static;
Here is the CSS that is used:
position: relative;
An element with position: relative; is
positioned relative to its normal position.
Setting the top, right, bottom, and left
properties of a relatively-positioned
element will cause it to be adjusted away
from its normal position. Other content will
not be adjusted to fit into any gap left by
the element.

This <div> element has position: relative;


Here is the CSS that is used:
position: fixed;
An element with position: fixed; is
positioned relative to the viewport, which
means it always stays in the same place
even if the page is scrolled. The top, right,
bottom, and left properties are used to
position the element.
A fixed element does not leave a gap in the
page where it would normally have been
located.
Notice the fixed element in the lower-right
corner of the page. Here is the CSS that is
used:
position: absolute;
An element with position: absolute; is
positioned relative to the nearest positioned
ancestor (instead of positioned relative to the
viewport, like fixed).
However; if an absolute positioned element
has no positioned ancestors, it uses the
document body, and moves along with page
scrolling.
Note: A "positioned" element is one whose
position is anything except static.
Here is a simple example:
Overlapping Elements
When elements are positioned,
they can overlap other elements.
The z-index property specifies the
stack order of an element (which
element should be placed in front
of, or behind, the others).
An element can have a positive or
negative stack order:
Quiz:
1. A term used when talking about design and layout in
CSS.
2. This part clears an area outside the border of a box.
3. Where text and images appear.
4. Clears an area around the content. This is transparent.
5. Part of the box that goes around the padding and content.

Problem Solving: (5 pts)


I. If I am going to create a div for header which has a margin
of 10px, a padding of 5px, a border of 5px and a content
width of 660px, what is the total width of the element div?
Show how the total width of an element should be calculated.

II. Identify and define the different CSS Position Property and
Z-index. (2 pts each)
Activity
• Using your last web page activity
insert the four layout positioning
property in the heading.
• Save your work in four different web
pages with the filename of every
position.
• Insert a hyperlink in the navigation
menu to link the four pages.
Assignment:
1. Visit this website:
http://www.w3schools.com/css
2. Click CSS Navigation Bar.
3. On your notebook copy important details,
steps on how to layout CSS using the
position property of an element.
4. Prepare for a hands-on activity regarding
the topic next meeting. I will pose in our FB
group page the activity that you are going to
make in our ICT Lab.
Transitional Page
www.animationfactory.com

Backdrops:
- These are full sized
backdrops, just scale them up!
- Can be Copy-Pasted out of
Templates for use anywhere!

You might also like