CSS3 POSITION
2021-11-16 13:57 · 6 min read
The CSS position property is used to sets how an element is positioned in on the top, right, bottom, and left positions. CSS position properties determine the final location of positioned elements.
Position Property
We can use different CSS position properties on HTML elements.
- static
- relative
- fixed
- absolute
- sticky
STATIC POSITION
An element with a static position is always positioned according to the normal flow of the page.
<style>
div{
position: static;
border: 3px solid #73AD21;
}
</style><!DOCTYPE html>
<html>
<head>
<style>
p{
position: static;
border: 5px solid black;
}
</style>
</head>
<body>
<p>TDB Tutorials</p>
</body>
</html>
RELATIVE POSITION
An element with position: relative; is positioned relative to its normal position.
We can set the top, right, bottom, and left properties on a relatively positioned element then it will cause it to be adjusted away from its normal position. We can't fit other contents into any gap left by the element.
<style>
div{
position: relative;
right: 30px;
border: 5px solid black;
}
</style><!DOCTYPE html>
<html>
<head>
<style>
p{
position: absolute;
border: 5px solid black;
bottom:0;left:0;
}
div{
position: relative;
height:400px;
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<p>TDB Tutorials</p>
</div>
</body>
</html>
FIXED POSITION
An element of fixed position is always positioned relative to the viewport, means it always stays in the same position even if the page is scrolled. The four properties are used to position the element (top, right, bottom, and left). Note: You can see a pink circle in this page (bottom right cornor.). This is the example of fixed element.
<style>
div{
position: fixed;
bottom: 0;
right: 0;
width: 100px;
border: 5px solid black;
}
</style><!DOCTYPE html>
<html>
<head>
<style>
body{height:1000px}
p{
position: fixed;
bottom: 0;
right: 0;
width: 100px;
border: 5px solid black;
}
</style>
</head>
<body>TDB EDITOR
<p>TDB Tutorials</p>
</body>
</html>
ABSOLUTE POSITION
When we use top, right, bottom, and left position properties on an element of absolute position, it's always positioned with respect to its parent element.
<style>
.parent-class{
position: relative;
right: 30px;
border: 5px solid black;
width:200px;
height:200px;
}
.child-class{
position: absolute;
top: 20px;
left:20px;
width: 50px;
height: 50px;
border: 5px solid red;
}
</style>
Create a div element of the class name parent and create an element inside it with the class name child. Now try it run the code.
<!DOCTYPE html>
<html>
<head>
<style>
.parent{
position: relative;
border: 5px solid black;
width:200px;
height:200px;
}
.child{
position: absolute;
top: 20px;
left:20px;
width: 50px;
height: 50px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="parent"><div class="child"></div></div>
</body>
</html>
STICKY POSITION
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in top place.
<style>
div{
/* Safari */
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: green;
border: 5px solid black;
}
</style>Note: Not supported by Internet Explorer, Edge 15, and earlier versions.
<!DOCTYPE html>
<html>
<head>
<style>
body{height:1000px}
div{
/* Safari */
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: white;
border: 5px solid black;
}
</style>
</head>
<body>
Simple example of sticky position.<br>
Tdb Editor
<div>TDB Tutorials</div>
</body>
</html>
