CSS objects are the way by which browsers represent page elements according to the CSS specifications. In this model, each element represents an object that, in turn, has its own attributes. The main attributes of each object are basically two: coordinates and role.
Coordinates
Each object is contained within a rectangular region of the screen along three axes: x, y, and z. The first two axes define the width and height of an object, whereas the z-axis defines it position within a stacking order, for example when elements overlap due to absolute or relative positioning. A browser computes these coordinates using absolute lengths which are later converted according to the rules defined by an author or user style sheet.
Coordinates are mutable. They can vary according to the CSS rules specified in a style sheet but a browser must always know the exact coordinates of each element to perform page calculations, such as those required by the reflow process. For that reason, each browser has its own internal tracking system delegated to one or more components of its own code.
Coordinates are actually effected by CSS rules. More specifically, they're affected by those properties that work together with the CSS box model.
Role
Each object has its own display role defined by the CSS display property. Each role breaks down into two categories: default and user-defined. A default role is the role defined by the default style sheet that a browser uses when there are no styles attached to a document. These roles are:
- block
Defines a block object.
- inline
Defines an inline object.
- inline-block
Defines an inline-block object.
- table value
Defines an object that belongs to a table context.
These roles are mutable, although it's not always easy to turn some objects into others (such as table objects). Instead, the roles defined by an external style sheet (both by an author or a user) takes always the precedence over the roles defined in a browser style sheet due to cascade.