CSS Position
Used to set the position type of an element
- turned_in_notPosition Related Properties
- position
- top
- bottom
- left
- right
- z-index
My static Position !
h1 {
position: static;
border: 2px solid teal;
}
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
position:static;
border: 2px solid teal;
}
</style>
</head>
<body>
<h1>Display content</h1>
</body>
</html>position:static;
It's a default position for HTML elements and it's not affected by top, bottom, right and left properties
Checkout my Position !
My position is not relative
h1 {
position:relative;
top:0;
border: 2px solid teal;
}
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
position:relative;
top:0;
border: 2px solid teal;
}
</style>
</head>
<body>
<h1>Checkout my Position !</h1>
<p>My position is not relative</p>
</body>
</html>position:relative;
It's positioned relative to its normal position and affected by top, bottom, right and left properties
- Remember : It also become the first parent of its child elements
- label_outlineTryout more
Checkout my Position !
My position is not absolute
h1 {
position:absolute;
top:60px;
border: 2px solid teal;
}
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
position:absolute;
top:60px;
border: 2px solid teal;
}
</style>
</head>
<body>
<h1>Checkout my Position !</h1>
<p>My position is not absolute</p>
</body>
</html>position:absolute;
It's positioned relative to the first parent element that has a position other than static and affected by top, bottom, right and left properties
- Remember : It also become the first parent of its child elements
- label_outlineTryout more
Checkout my Position !
My position is not fixed
h1 {
position:static; /*fixed;*/
border: 2px solid teal;
}
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
position:fixed;
border: 2px solid teal;
top:50px;
}
</style>
</head>
<body>
<h1>Checkout my Position !</h1>
<p>My position is not fixed</p>
</body>
</html>position:fixed;
It's positioned relative to the browser window and affected by top, bottom, right and left properties
- Remember : It also become the first parent of its child elements
- Important : if any of it's (grand)parent has 'transform' property then the element act like 'absolute', so be careful with that !
- label_outlineTryout more
Checkout my Position !
Scroll down to see effect
It will stick at the top position
as mentioned in css properties
Scroll down to see effect
Scroll down to see effect
h1 {
position:sticky;
top:0px;
background:#a9e5ff;
}
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div{
height:160px;
overflow-x:hidden;
overflow-y:auto;
padding:0 10px;
background:#f1f1f1;
}
h1{
padding:2px 10px;
background:#a9e5ff;
position:sticky;
top:0px;
}
</style>
</head>
<body>
<div>
<h1>Checkout my Position !</h1>
<p>Scroll down to see effect</p>
<p>It will stick at the top position</p>
<p>as mentioned in css properties</p>
<p>Scroll down to see effect</p>
<p>Scroll down to see effect</p>
</div>
</body>
</html>position:sticky;
It's positioned relative to the first parent element and mainly affected by top property.
right and left, may not affect in every browser
- Remember : It also become the first parent of its child elements
- label_outlineTryout more
My Content !
The image is moving in z-axis
img {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
</style>
</head>
<body>
<h1>My content</h1>
<img src="leaf4.png">
<p>The image is moving in z-axis</p>
</body>
</html>- label_outlineTryout more
Properties Values z-index:- It positioned the element in Z-axis
- Values can be any value in Z-axis (like -N to N), 'N' can be any number
- Works only with position value other then static
- Cannot go beyond its first parent element
So,