CSS: Positioning

Included in the course

What you'll learn

• Control the document flow by being aware of how the browser works
• Put into practice all types of HTML element positioning
• Create interactive pages while understanding the essence of the layout

Description

The layout of elements on a page is a vast subject with plenty of peculiarities. They can be taken into account once you know the fundamental rules of CSS and how to control the flow of documents within the HTML markup. This course will walk you through the basic principles of element positioning step-by-step through practice

Course program

• 1

  Intro

  Meet the course

  theory
• 2

  Document flow

  Learn how browsers render HTML and what a normal document flow is

  theory

  quiz
• 3

  Relative positioning

  Learn to use relative positioning and its features

  theory

  quiz

  exercise
• 4

  Absolute positioning

  Learn how to pull an element from a normal flow

  theory

  quiz

  exercise
• 5

  Relative and absolute positioning

  Learn about the relationship between the absolute and relative positioning. Find out how to position an element relative to another block absolutely

  theory

  quiz

  exercise
• 6

  Fixed positioning

  Learn to position the element relative to the browser itself

  theory

  quiz

  exercise
• 7

  Floating elements

  Discover floating elements and their features

  theory

  quiz

  exercise
• 8

  Element overlap

  Learn about element overlapping, and its relation to positioning

  theory

  quiz

  exercise
• 9

  Additional resources

  Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic

Challenges

We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.