position (CSS2)

A margin is the space outside of the element, whereas padding is the space inside the element.

With absolute positioning, an element can be placed anywhere on a page. In this example the heading has been placed 100px from the left of the page and 150px from the top of the page. It will remain in this position.

jQuery animate method is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple.

This allows us to animated the element movement infinitly.

CSS3 transitions are effects that let an element gradually change from one style to another. To do this, you must specify the effect and the duration.

This allows us to move the animated element to move from one place to another.

jQuery Animate can function supports animation in different directions

The HTML div element is a block level element is also nice to use for positioning around on the web page. In this example were two small boxes is position relative to the larger box.

CSS Transforms offers you the possibility to scale, rotate, reposition and skew an element through CSS. We can now combine this with CSS Transitions to create a nice example that will both scale and rotate an element when hovered

The jQuery animate method has a complete method we can supply with callback function that is fired once the animation is complete. This can be useful for stringing different animations together in sequence like this example.

This example uses "z-index:100" to place an image above the text. Try to change z-index to -1 and see the image fall behind the text.

Relative position specifies the position of the element within the area. It will not go outside of the containing area.In the given example the containing area is body of the page.

This property makes the element fix on the page. Scrolling will not effect the position of element Please ensure the browser window is small enough for a scrollbar to appear, this fully demonstrates the fixed positioning.

To have the effect for bottom text we have created a master container where the position to all child elements position is relative to the master container. And we used a child container with a absolute position to bottom and left for the master container.

CSS position property allows us to set an absolute position to an element (relative to it's environment). We can set the position of an element using the top, right, bottom, and left properties.