Position mixins

Position mixins follow the following naming pattern:

1#position.position-type(@position, @x-value, @y-value);

In the following examples the parent element is set with relative positioning and the child purple div has the position mixin applied so it will be positioned within the grey bordered wrapper. All position mixins require the first parameter.

1#position.absolute(top-left);

To set desired values pass in the postion values. In the next example, absolute positioning is set on the element with the bottom value as 10px and right value as 5px.

1#position.absolute(bottom-right, 10px, 5px);

The next example shows how to set relative positioning with a top value of 10px and right value of -50px.

1#position.relative(top-right, 10px, -50px);

This example shows a fixed positioning example, however as fixed positioning is calculated from the body element so there is no visual example here as if there was a small square purple div would ppear at the top left of the screen and would look out of place. In general fixed positioning is only used for elements that need to be fixed to the screen, like menu bars for example.

1#position.fixed(top-left, 20px, 50px);