Element Positioning
Introduction
In HTML, elements such as Divs can be positioned on the page in a precise position called absolute, which places the element at an exact position on the page. They can also be given a relative position, which puts the element in a position relative to it's natural position. Other positions include static which confusingly does not put the element in a static position, but instead makes the element 'flow' with the rest of the document. static is the default for all elements and does not need to be stated if no other type of position is used. Another position type is fixed which positions the element in a particular place in the web browser window, so it similar to absolute except that fixed elements ignore the position of scrollbars in the browser. Finally, there is the inherit position, which simply uses the position of the element's parent.
In Flux, positions are changed using the Inspector.
Absolute Position
To get started, first create a Div on the page, you can do this using the
Quick Div function. This will put a simple Div onto your page, already using
absolute position.
If you drag around this new Div, you will see that it's
top and
left attributes change in the Inspector. If you move the Div to the top left corner of the page, you'll find that both
top and
left attributes change to numbers close to or exactly 0, this is because elements are position by their top left corner, relative to the top left corner of the page, so if the top left corner of the Div is exactly on top of the top left corner of the page, then the numbers will both be 0.
Static Position
static position is very confusingly named, as in fact, the if an element uses a
static position, it's anything but static, and will in fact change it's position depending on what comes before it in the document.
When this Div has it's
position attribute changed to
static, it immediately snaps to the top left corner of the page, this is because it is the first available position in the "flow" of the document, if the div was duplicated, it would snaps to just after the first div, as that is where it naturally "flows" to.
Relative Position
relative position is something of a cross between
static and
absolute in that the element will move in the flow of the document, but you can also alter it's position
relative to it's position. So setting the
top and
left attributes to '5 px' and '5 px' will move the element by 5 pixels each way
more than it already was, and not in relation to the top left of the body element.
What you will notice in the screen capture above is that the top and left attributes are each set to "5 px", but the Div is more than 5 pixels down from the top, this is becase the text before it has already pushed down the element, and the 5 pixels is
in addition to the amount it has already moved. Similarly, you could drag the element back up the page by setting the
top attribute to "-5 px".
Fixed Position
fixed position is quite simply fixing an element in position, regardless of window size or scrollbar position.
As well as ignoring the position of the window or scrollbars, it will also ignore any other elements and text before or after it.
Inherit Position
inherit position takes the position from it's parent element, if the parent element is also inherit then it's parent is used, and so on. If no position is ever specified, then the default of static is used.