Definition:
CSS position: absolute is positioned relative to the closest parent with no relative values.
When you defined an element in absolute position, you must define their top, bottom, right, and left values where exactly you want those elements.
Let’s have one element defined as relative position and another element defined as absolute position inside relative position and position at the top left, top right, bottom left, and bottom right accordingly.
See the below example.
Syntax:
position: absolute;Absolute Top Left Position | Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
width: 400px;
height: 250px;
padding-left: 10px;
border: 3px solid #73AD21;
text-align:center;
}
.absolute {
position: absolute;
top: 0;
left:0;
width: 50px;
height: 50px;
padding: 5px;
color: white;
background-color: black;
border: 3px solid red;
}
</style>
</head>
<body>
<h3>CSS position:absolute top left corner </h3>
<div class="relative">I am an element with relative position
<div class="absolute">top: 0; <br/> left: 0;</div>
</div>
</body>
</html>
Output:
Absolute Top Right Position | Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
width: 400px;
height: 250px;
padding-left: 10px;
border: 3px solid #73AD21;
text-align:center;
}
.absolute {
position: absolute;
top: 0;
right:0;
width: 60px;
height: 40px;
padding: 5px;
color: white;
background-color: black;
border: 3px solid red;
}
</style>
</head>
<body>
<h3>CSS position:absolute top right corner </h3>
<div class="relative">I am an element with relative position
<div class="absolute">top: 0; <br/> right: 0;</div>
</div>
</body>
</html>
Output:
Absolute Bottom Left Position | Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
width: 400px;
height: 250px;
padding-left: 10px;
border: 3px solid #73AD21;
text-align:center;
}
.absolute {
position: absolute;
bottom: 0;
left:0;
width: 60px;
height: 40px;
padding: 5px;
color: white;
background-color: black;
border: 3px solid red;
}
</style>
</head>
<body>
<h3>CSS position:absolute bottom left corner </h3>
<div class="relative">I am an element with relative position
<div class="absolute">top: 0; <br/> right: 0;</div>
</div>
</body>
</html>
Output:
Absolute Bottom Right Position | Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
width: 400px;
height: 250px;
padding-left: 10px;
border: 3px solid #73AD21;
text-align:center;
}
.absolute {
position: absolute;
bottom: 0;
right:0;
width: 60px;
height: 40px;
padding: 5px;
color: white;
background-color: black;
border: 3px solid red;
}
</style>
</head>
<body>
<h3>CSS position:absolute bottom right corner </h3>
<div class="relative">I am an element with relative position
<div class="absolute">top: 0; <br/> right: 0;</div>
</div>
</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)