Stylizer

Stylizer Internals

Placement Modes in Stylizer

You may be familiar with the three options available in the CSS position property: static, relative, and absolute. However, these three positioning options are not representative (in the practical sense) of the methods web designers use to position elements on a web page.

Placement modes are Stylizer's attempt to package the CSS positioning system into an intuitive model. There are 3 main options: Anchor, Shift and Displace. Although we feel the names we've chosen best describe the logic, some designers may use other names (or no name at all) for the same practice.

Placement modes require a mode setting (Anchor, Shift, Displace), as well as X and Y coordinates. Each mode interprets these coordinates differently.

Anchor

Anchoring means that the element is removed from the flow of the layout, and is drawn on it's own layer on top of the rest of the page. Then, it is positioning a fixed distance away from one of the corners of the containing element.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Not Anchored.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Anchored to the top right (2px down, 2px left).

In technical terms, anchoring sets an element as position absolute. Then it's containing element as set to position relative. Finally, the top & left, top & right, bottom & left, or bottom & right CSS properties set the element a certain distance away from one of the four corners of the containing element.

When the web site has an Initialization Block defined, each element's default positioning option is relative. In this case, elements will always anchor to their containing elements, which is most often the desired result.

Shift

When an element is Shifted, it is not removed from the flow of the layout. It is only visually shifted away from it's original location.

The quick brown fox jumps over the lazy dog.
Not shifted.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Shifted left 30px (no change vertically).
The quick brown fox jumps over the lazy dog.

In technical terms, Shifting sets an element to position relative. Then, the top and bottom properties are used to Shift the element away from it's original location.

Displace

Displace is similar to shift, except the element is removed from the flow of the layout.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Not displaced.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Displaced down 2px, and right 5px.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

In technical terms, Displace sets the element to position absolute. When an element is set to position absolute and none of the top/bottom/left/right are used, the element is remains in it's original location, but is removed from the flow of the layout. Then, negative and positive amounts of margin-top and margin-left properties are used to shift the element away from it's original location.

The Secondary Placement Modes

In addition to Anchor, Shift, and Displace, Stylizer also has support for 3 other placement modes: float:left, float:right, and margin:auto. These align an element to the left, to the right, or center it, respectively. Technically there is no difference between using these placement modes and simply adding a float: left declaration to the rule, except that it's possible to add the declaration with a few mouse clicks, as opposed to entering the information manually.

Also, when a secondary placement mode is used, the option is also available to shift the element up, down, left, or right.

What about Fixed positioning?

If you want to get technical, Fixed positioning at it's core is just a fancier way of Anchoring an element to the window, and then placing the entire contents of the web site in an DIV set to overflow:auto, whose dimensions match the window.

Test Case

For an isolated test case of placement modes, try loading this page in Stylizer.