In CSS, the position property is used to set position for the HTML elements. Mainly the position property can have four possible values - static, relative, fixed or absolute.
Example
Below example will set a fixed element in the lower-right corner of the page:
CSS Programing
The position:static property
By default, the HTML elements have the position value as static which can not be affected by the top, bottom, left, and right properties.Example
#example-static
{
position: static;
border: 1px solid black;
}
The position:relative property
Positioning any HTML element as relative, is positioned relative to its normal position. This can be done by setting the top, right, bottom, and left properties of a relatively-positioned element.#example-relative
{
position: relative;
left: 25px;
border: 1px solid black;
}
The position:fixed property
Positioning any HTML element as fixed, allows to position an HTML element to a particular spot on the page (relative to the viewport). It will fix the position of the element that always stays in the same place even if the page is scrolled.Below example will set a fixed element in the lower-right corner of the page:
#example-fixed
{
position: fixed;
bottom: 0;
right: 0;
width: 250px;
border: 1px solid black;
}
The position:absolute property
An element defined with the position: absolute property is positioned at the specified coordinates relative to the screen top-left corner.#example-absolute
{
position: absolute;
left: 250px;
top: 250px;
border: 1px solid black;
}