Positioning

POSITIONING TECHNIQUES — THANK GOODNESS THERE AREN’T 31 FLAVORS!

An example of a floated element can be seen in the pull quote with the white background...

I decided to begin reworking the homepage, and use the elements here to practice positioning techniques. Below I've written descriptions of the methods and how I think they are supposed to work.

The types of positioning are:

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Or, in other words, elements follow each other based on the order in which they appear in the html document.

Fixed Positioning

An element with fixed positioning is positioned relative to the browser window. It will not move even if the window is scrolled.

You can see an example of fixed positioning in the palm tree image at the bottom right of this page.

Relative Positioning

A relative positioned element is moved with respect to where it's normal, or static, position would be.

You can see an example of relative positioning in the links which say 'class sites' and 'home'.

Absolute Positioning

An absolute positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is ‘html’.

You can see an example of absolute positioning in the bird at the bottom left of the screen. Even though the html for the image appears at the top of the html document, the image itself appears at the bottom of my monitor. When I scroll the window, the image moves across the monitor.

I am very much afraid to find out where this bird image lands, if you'll excuse the pun, on another device.

Floated Positioning

An example of a floated element can be seen in the pull quote with the white background, at the top right. Text flows around it.