CSS Position Property

This property is used to specifies how to position elements on the page relative to the rest of the layout. In normal scenario, the HTML elements are display in natural flow of the HTML document. But, by using position property we can explicitly specify the display position of a HTML element.

Ex: position : value;

Position property values are:

static: This is the default value, it means if you don’t set the position property of an elements then by default position is static . The HTML element is display in the natural flow of HTML document and we can’t change it natural position.

Ex: position : static;

relative: It is similar to the static position property. The elements is display in the natural flow of the HTML document, but the only difference is by using relative position you can change the natural position of element by using top, rigth, left and bottom property.

Ex: position : relative;

absolute: If you want to set the the position absolute of a HTML element, then you must need to set its parent container element as position relative. You can move (or set the position) the child element with in its parent container element by using top, rigth, left and bottom property.

Ex: position : absolute;

fixed: Position fixed element is taken out from its natural layout, and element remain intact with its position regardless of the page scroll.

Ex: position : fixed;

sticky: Sticky is the combination of relative and fixed position, it stick on a certain position, set by user.

Ex: position : sticky;

CSS Box Shadow Property

The box-shadow property allow us to add drop shadows to HTML element.

Ex: box-shadow : value;

Horizontal & Vertical Offset: How far from the element each way.

Blur Radius(Optional): How blurry the shadow is.

Spread Radius(Optional): How much the shadow should grow or shrink.