Lesson 2 - Part 9: 10 Important CSS properties: Position

As the name suggests, the CSS property position is used to align the HTML elements.

CSS properties like top, right, left, bottom properties aligns the HTML element as per the values set to these properties. The position property specifies with respect to what these top, right, left and bottom values are to be set for an element.

The position property can be: relative, absolute, fixed or static. By default all HTML elements are static. Now let us see how these values work.

1. Position: relative

Position relative sets position of an element with respect to its normal position that it is supposed to be. Here is a jsfiddle example that shows how the division is positioned according to the top and left values when its position is relative.

2. Position: static

By default all the HTML elements have static position. For such elements, the properties like top, left, right, bottom does not make any difference in their positioning. Try changing the position from relative to static in the above example, the output will be:

3. Position: absolute

The position absolute sets the element relative to their parent element with positioning relative or absolute. Here is the jsfiddle example: jsfiddle example: position absolute.

Now, try changing the position relative property from the outerRelativeWrapper and see where the absolute division aligns.

Position: fixed

Position fixed aligns the element with respect to the viewport. The element remains at the same place even after scrolling. Here is example for position fixed: jsfiddle example

I have used dummy text from www.lipsum.com to get some page scrolling.

Can you do this?

Can you create these overlapping divisions as shown below? The color code for opaque div is #FBE5D6 and that for the overlapping transparent div is rgba(214,220,229,0.5).