CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 259

it were an inline-level box. Changing the display to display:inline-block pro-
duces Figure 6-15 .
Figure 6-15. Inline-level box and block-level box being treated as an inline-level box for layout
purposes
There are several other values for the display property, 9 but block , inline , and
inline-block are the three main ones that can be used for changing the default lay-
out behavior of the majority of HTML's elements.
Setting box position
To make adjustments to the position of an element, the position property is used. It
has the following values (plus inherit , which just uses its parent element's settings):
• static : The box is in its default position. The positioning properties ( left ,
top , right , and bottom ) are ignored.
• relative : The box is offset from its default position by the number of pixels
specified in the CSS positioning properties, which are the named left , top ,
right , and bottom .
• absolute : The box is offset by the number of pixels specified in the position-
ing properties but is offset from the upper-left corner of the first parent element
that has its position property set to a non- static value or to the upper-left
corner of the browser's viewing area, whichever comes first.
• fixed : Works like absolute positioning with the added functionality that the
box does not scroll with the rest of the content on the page and is instead fixed
in the viewing area.
Setting box layering
Since boxes may be positioned relatively and absolutely, that means they may overlap
each other (which can be used to create interesting effects!). When two elements overlap