Tailwind CSS provides utility classes to control the position of an element along the top, right, bottom, and left sides of its positioned parent. These utilities are mainly used with relative, absolute, fixed & sticky positioning.
Top
The top utilities control how far an element is positioned from the top edge of its containing block. They are useful for moving elements vertically downward or upward from the top reference point.
For Example, top-4 sets the top offset to 1rem (16px). The actual position depends on the elements's positioning context.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Top</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Driver Code Ends-->
<div class="relative m-10 h-40 w-80 bg-gray-200">
<div class="absolute top-4 left-4 bg-blue-500 p-4 text-white">
GeeksForGeeks
</div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Right
The right utilities control the distance between an element and the right edge of its containing block. They are commonly used to move an element horizontally toward or away from the right side.
For example, right-4 sets a right offset of 1rem (16px).
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Right</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Driver Code Ends-->
<div class="relative m-10 h-40 w-80 bg-gray-200">
<div class="absolute top-4 right-4 bg-green-500 p-4 text-white">
GeeksForGeeks
</div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Bottom
The bottom utilities control the distance between an element and the bottom edge of its containing block. They are useful for positioning elements near the bottom of a container, such as labels, buttons, or overlays.
For example, bottom-4 sets a bottom offset of 1rem (16px).
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Bottom</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Driver Code Ends-->
<div class="relative m-10 h-40 w-80 bg-gray-200">
<div class="absolute bottom-4 left-4 bg-purple-500 p-4 text-white">
GeeksForGeeks
</div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Left
The left utilities control the distance between an element and the left edge of its containing block. They are useful for positioning elements horizontally from the left side of a container.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Left</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Driver Code Ends-->
<div class="relative m-10 h-40 w-80 bg-gray-200">
<div class="absolute top-4 left-4 bg-red-500 p-4 text-white">
GeeksForGeeks
</div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Using Negative Values
Tailwind CSS also supports negative values for these utilities. Negative values move an element in the opposite direction from the specified edge.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Negative Values</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Driver Code Ends-->
<div class="relative m-20 h-40 w-80 bg-gray-200">
<div class="absolute -top-4 -left-4 bg-red-500 p-4 text-white">
Negative Position
</div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Using Arbitrary Values
Tailwind CSS allows custom values when the predefined spacing scale does not meet the positioning requirement.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Arbitrary Values</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Driver Code Ends-->
<div class="relative m-10 h-60 w-96 bg-gray-200">
<div class="absolute top-[30px] left-[80px] bg-blue-500 p-4 text-white">
Arbitrary Position
</div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Responsive Positioning
These utilities can also be combined with responsive breakpoints to change an element's position based on screen size.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Responsive Positioning</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Driver Code Ends-->
<div class="relative m-10 h-60 w-96 bg-gray-200">
<div class="absolute top-2 left-2 bg-blue-500 p-4 text-white
md:top-6 md:left-6
lg:top-10 lg:left-10">
Responsive Position
</div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->