What is the Position?
- The position CSS property sets how an element is positioned in a document.
- There are mainly 5 position values in CSS, and these are: i) static, ii) relative, iii) absolute, iv) fixed, v) sticky
This will be our boilerplate:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Positions in CSS </title>
<style>
.para {
}
</style>
</head>
<body>
<p class="para"> Thanks for visiting geekshelp.org</p>
</body>
</html>
Different Position Property values
i) static: This is the default CSS position value for HTML elements.
.para {
position: static;
}
ii) relative: Relative means the HTML element is related to its normal position and will leave a gap at its normal position.
.para {
position: relative;
}
iii) absolute: Elements with the absolute position are relative to the position of their first parent element.
.para {
position: absolute;
}
iv) fixed: Elements with the fixed position are always relative to the viewport. Elements with fixed positions will always stay in the same position on the screen.
.para {
position: fixed;
}
v) sticky: The sticky position is based on the user's scroll position.
.para {
position: sticky;
}
Using Position Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Positions in CSS</title>
<style>
.absolute {
position: absolute;
top: 20rem;
right: 20px;
padding: 5px;
}
</style>
</head>
<body>
<p class="absolute"> Thanks for visiting geekshelp.in</p>
</body>
</html>
Output:
