By default, every element on your page has position: static applied to it. For that reason, it almost never needs to be declared explicitly, unless it is required to undo another position value inherited from an earlier declaration.

static does not mean that the element maintains its position on the page. In fact a better term for this value would be “fluid”. The default positional model for HTML elements means that things do not overlap on your page: every element pushes every other element around, adjusting to the size, resolution, and aspect ratio of the device on which it is displayed.

Let's take a simple example of page content:

<p><img src="assets/images/pericles.jpg" style="float: left;" 
alt="Bust of Pericles">
Pericles was a prominent statesman, orator, and naval general of Athens 
during the city-states's <q>Golden Age</q>, from 448BCE until his death 
in 429.  Pericles was a promoter of the arts (particularly plays), 
architecture (it was under his patronage that the Parthenon was built), 
and the principles of democracy, but he was also an instigator of war:
Pericles is widely held to be responsible for maneuvering Athens 
into the disastrous Peloponnesian  War with Sparta.</p>

In this example, every element reserves its own space. The image does not overlap the text, and the text is pushed away from the image. static elements remain in the “flow” of the document. Resizing the browser would cause the page width to narrow, and the paragraph lines to wrap around the image and push any content below it further down the page. This is a good thing: page content adapts to every screen size, aspect ratio and resolution easily, and nothing overlaps or obscures anything else.

Note that this “nothing overlaps, everything is fluid” behaviour is a general governing principle of position: static. There are a few exceptions: text will obviously be on top of any background image, fluid designs can be abandoned by implementing fixed widths on containing div elements, and elements can be overlapped or pushed off the page by applying negative margin to their CSS presentational rules. But in general, static rules hold.

Elements with position: static applied to them, either explicitly or by default, cannot have the properties we are about to discuss in the next entries (top, left, bottom and right) applied to them. Static elements can only be moved around by modifying the values of margin or padding, or by altering their position in the HTML code of the page. This is a perfectly acceptable and simple for the majority of designs.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.