CSS Position
CSS position property defines the type positioning of an HTML element. Following are the values of position proerty:
- static
- relative
- absolute
- fixed
static Value
static value is always positioned according to the normal flow of the webpage.
By default the position is static for an element. Elements with static position are not affected by the top, bottom, left, and right properties.
Here is an example of static value:
Example:
relative Value
The elements using relative value are always positioned relative to its normal position. You can use the top, bottom, left, and right properties to set the relative element away from its normal position.
Here is an example of relative value:
Example:
absolute Value
The elements using absolute value are positioned relative to the first parent element whose position is anything except static. If there is no such element, then it uses the document body.
Here is an example of absolute value:
Example:
position: relative;
border: 5px solid lightblue;
height: 100px;
width: 500px;
}
div.absolute {
position: absolute;
border: 5px solid lightblue;
top: 20px;
right: 0;
height: 50px;
width: 300px;
}
Run Example
fixed Value
The elements using fixed value are always positioned fixed on the webpage. It is positioned relative to the browser window and even fixed when you scroll the window. You can use the top, bottom, left, and right properties to set the position.
Here is an example of fixed value:
Example:
position: fixed;
border: 5px solid lightblue;
right: 0;
bottom: 0;
width: 500px;
}
Run Example