Lecture Notes

Section 1: Introduction

Course Objectives

Section 2: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS IDs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements
×
More

Lecture Notes

Course: CSS Fundamentals View Course Outline


Created by:

YouAccel

Lectures:

32

Duration:

1h 47m 20s

Skill Level:

Beginner

Language:

English

Students Enrolled:

11,062

Rating:

(86)

Certification Type:

Completion Certificate

Lecture: CSS Absolute Positioning

Another position property is absolute positioning. absolute positioning will ensure the element stays in the exact same position specified in the style rule. It does not consider the flow of the page, when you resize the browser window.

Let's take a look at an example to illustrate this concept.

Say we added a block of text above our <div> tags. Now when we refresh our browser, take a look at what happens to our <div> position as we scale the browser bigger and smaller.

The <div> moves up and down to accommodate the text as the browser shrinks and expands.

With relative positioning the <div> moves with the flow of the page.

Now let's change the position of our parent <div> to absolute. Refreshing our browser, we can now see the <div> does not consider the block of text above it. It remains in the exact position specified in our style declaration regardless of what we do. We can re-size our browser and the position will stay in the same place.