Definition:
CSS position:relative is positioned relative to its normal position.
The properties top, bottom, left and right will positioned the relative elements.
See an example below of using CSS position:relative;
Syntax:
position: relative;Source Code:
See an example of relative positioned of element in top left corner with values.
<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
left: 50px;
top: 20px;
width: 400px;
height: 80px;
padding-left: 10px;
border: 3px solid #73AD21;
text-align:center;
}
</style>
</head>
<body>
<h3>CSS position: relative.</h3>
<div class="relative">I am an element with relative position.
</body>
</html>
Output:
You may be interested in the following topics:
- CSS Position relative
- CSS Position sticky
- CSS Position static
- CSS Position fixed
- CSS Position absolute
- CSS Position (All Properties)