View and position

The section about view-related properties: styles, sizes, positioning etc.

Metrics

  1. Prerequisite: CSS box model
  2. Example document
  3. Box metrics
  4. Practice
  5. Summary

It is possible to position elements with JavaScript. A simple example of such positioning is a tooltip which follows mouse.

This section describes how to get/calculate coordinates of elements and their position.

Styles and classes, getComputedStyle

  1. className
  2. style
    1. cssText
    2. Reading the style
  3. getComputedStyle and currentStyle
  4. Summary

This section is about reading and changing the view of an element.

Please make sure you are familiar with CSS Box Model before reading it. Knowing what is a padding, margins, a border is a prerequirement.

Re-introducing CSS positioning

  1. Static
  2. Relative
  3. Fixed
  4. Absolute
  5. Absolute in the positioned ancestor
  6. Read more

CSS positioning becomes very important in building graphical components.

In this section we remember it and use in widgets.

Coordinates

  1. Coordinate systems
  2. Element coordinates by offsetParent
  3. The right way: elem.getBoundingClientRect
  4. The combined approach
  5. Summary

There are two coordinate systems in the browser.

  1. relative to document - the zero point is at the left-upper corner of the page.
  2. relative to window - the zero point is at the left-upper corner of the current visible area.

Tutorial

Donate

Donate to this project