CssHow-ToBeginner · 3 min read

How to Use Top, Right, Bottom, Left in CSS Positioning

In CSS, top, right, bottom, and left are used to position elements when their position property is set to relative, absolute, fixed, or sticky. These properties specify the distance from the respective edges of the containing block or viewport.

📐

Syntax

The top, right, bottom, and left properties accept length values (like px, em), percentages, or auto. They work only if the element's position is not static (the default).

top: Distance from the top edge of the containing block.
right: Distance from the right edge.
bottom: Distance from the bottom edge.
left: Distance from the left edge.

css

selector {
  position: relative | absolute | fixed | sticky;
  top: <length> | <percentage> | auto;
  right: <length> | <percentage> | auto;
  bottom: <length> | <percentage> | auto;
  left: <length> | <percentage> | auto;
}

💻

Example

This example shows a red box positioned 20 pixels from the top and 30 pixels from the left inside a container. The box uses position: absolute to move relative to its nearest positioned ancestor.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top Right Bottom Left Example</title>
<style>
  .container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #eee;
    border: 1px solid #ccc;
  }
  .box {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

Output

A gray rectangular container with a smaller red square inside it, placed 20px from the top and 30px from the left edges of the container.

⚠️

Common Pitfalls

One common mistake is using top, right, bottom, or left without setting position to a value other than static. In that case, these properties have no effect.

Also, mixing left and right or top and bottom can cause unexpected stretching or conflicts.

css

/* Wrong: position is static by default, so top has no effect */
.box {
  top: 20px;
  left: 30px;
  background-color: blue;
  width: 100px;
  height: 100px;
}

/* Right: set position to relative or absolute */
.box {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: blue;
  width: 100px;
  height: 100px;
}

📊

Quick Reference

Use with position: Must be relative, absolute, fixed, or sticky.
Values: Lengths (px, em), percentages, or auto.
Effect: Moves element from the specified edge.
Percentages: Relative to the containing block's size.
Sticky: Acts like relative until a scroll threshold.

✅

Key Takeaways

The top, right, bottom, and left properties only work if position is set to relative, absolute, fixed, or sticky.

These properties move the element away from the specified edge by the given distance.

Without setting position, these properties have no effect on the element.

Use absolute positioning to place elements precisely inside a positioned container.

Avoid setting conflicting pairs like both left and right unless you want stretching behavior.