The top, right, bottom, and left properties set an offset for a positioned element, with their exact meaning and effect depending on which position value the element uses.

Syntax

top: value;
right: value;
bottom: value;
left: value;

Deep Dive Course

These four offset properties only have any effect on an element whose position is something other than static, the default, since static elements deliberately ignore them entirely. On a relatively positioned element, they shift it visually from where it would otherwise sit in normal flow, without affecting the space it originally reserved there; on an absolutely, fixed, or sticky positioned element, they instead set the actual distance from the corresponding edge of that element's positioning context, like its nearest positioned ancestor for absolute, or the viewport for fixed.

1Understanding Top, Right, Bottom, Left

💡

top, right, bottom, and left have no effect at all on a statically positioned element, position's default value — if an offset value doesn't seem to be doing anything, double-check that the element actually has an explicit, non-static position value set.

editor.html

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

localhost:3000

2Practical Example

Here is a real-world application of Top, Right, Bottom, Left showing how it is used in production CSS code.

editor.html

.static-box {
  top: 20px;
  left: 20px;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Top, Right, Bottom, Left:

1. Verify an element has an explicit, non-static position value before troubleshooting why top/right/bottom/left don't appear to be having any effect

2. Use top/left, or an equivalent pair, rather than all four properties at once, unless you specifically need to also stretch the element by setting opposing sides simultaneously

3. Combine opposing offsets, like both left: 0 and right: 0 on an absolutely positioned element with no explicit width, to stretch it to fill its positioning context's full width

⚠️

Tip: top, right, bottom, and left have no effect at all on a statically positioned element, position's default value — if an offset value doesn't seem to be doing anything, double-check that the element actually has an explicit, non-static position value set.

editor.html

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

localhost:3000

Examples

Example 01Basic Usage

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Example 02Advanced Example

.static-box {
  top: 20px;
  left: 20px;
}

Best Practices

Verify an element has an explicit, non-static position value before troubleshooting why top/right/bottom/left don't appear to be having any effect
Use top/left, or an equivalent pair, rather than all four properties at once, unless you specifically need to also stretch the element by setting opposing sides simultaneously
Combine opposing offsets, like both left: 0 and right: 0 on an absolutely positioned element with no explicit width, to stretch it to fill its positioning context's full width

Interview Question

Why does setting top: 20px and left: 20px on an element have no visible effect at all if that element's position value is left at its default?▼

Hint: Think about which specific position values actually make use of the offset properties, and which one is the default.

The default value of the position property is static, and static positioning is specifically defined to keep an element in its normal, ordinary document flow position with the offset properties, top, right, bottom, and left, deliberately having no effect on it whatsoever — this is a specific, intentional rule of how static positioning works, not simply an oversight or a value of zero being effectively applied. Only the other position values, relative, absolute, fixed, and sticky, actually read and apply these offset properties in some way, each interpreting them slightly differently depending on that specific positioning mode. This means the offset properties are entirely inert, functionally meaningless, on any element that hasn't been given an explicit position value other than static, which is exactly why an element seemingly ignoring top/left/right/bottom values is one of the most common first things to check, specifically confirming the element actually has a non-static position value set at all.

Exercises

MediumPractice using Top, Right, Bottom, Left in a real scenario.

View Solution

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Frequently Asked Questions

Why does setting top: 20px and left: 20px on an element have no visible effect at all if that element's position value is left at its default?▼

Related Functions

PositionZ-indexRefDimensions