Top, right, bottom, left

Introduction

The top, right, bottom, and left properties allow authors to define the location of positioned elements.

1. Top

The top property helps to specify the vertical position of a positioned element.

/* Top using length */
p {
  position: absolute;
  top: 20px;
}

The effect of top depends on how the element is positioned.

Top and absolute positioning

With absolute positioning, the top property specifies the distance between the element’s top edge and the top edge of its containing block.

If no ancestors have positioning, the element will be positioned in relation to the initial containing block.

For example, setting top: 20px will move an absolutely positioned element 20px down from the top edge of its containing block.

Setting top: -20px will move an absolutely positioned element 20px up from the top edge of its containing block.

Setting top: 50% will move an absolutely positioned element down 50% of the height of the containing block, from its top edge.

Top and fixed positioning

With fixed positioning, the top property specifies the distance between the element’s top edge and the top edge of the viewport.

For example, setting top: 20px will move a fixed positioned element 20px down from the top edge of the viewport.

Top and relative positioning

With relative positioning, the top property specifies the distance the element’s top edge is moved away from its normal position.

For example, setting top: 20px will move a relatively positioned element 20px down from its normal position.

Top and sticky positioning

When position is set to sticky, the top property is ignored until the element is outside of the viewport.

However, the top property behaves as if it set to position: fixed when the element is outside the viewport.

For example, setting top: 20px will initially be ignored.

However, if the page is scrolled up and the element is outside the viewport, the element will sit 20px down from the top edge of the viewport.

Top and static positioning

When position is set to static, the top property has no effect.

Which property wins?

There are times when three different properties are defined for a specific element: top, bottom and height.

There is a possibility that some of these properties may clash.

For example, top: 0 and bottom: 0 will stretch the element to the top and bottom of the containing block.

But what happens if there is also height: 200px? Which properties will be applied and which will be ignored?

Top, bottom, height and absolute positioning

In the following example, an absolutely-positioned element has been given top and bottom values, and either no height or height: auto.

/* Top, bottom */
.example1 {
  position: absolute;
  top: 0;
  bottom: 0;
}

/* Top, bottom and height */
.example2 {
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
}

In both of these cases, both top and bottom values will be respected so the element will stretch to the full height of the containing block.

In the following example, an absolutely-positioned element has been given top and bottom values as well as a height.

/* Height using a length */
.example3 {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100px;
}

In this cases, the element will be positioned at the top of the containing block with a height of 100px. The bottom value will be ignored.

Top, bottom, height and fixed positioning

In the following example, a fixed-positioned element has been given top and bottom values, and either no height or height: auto.

/* Top, bottom */
.example4 {
  position: fixed;
  top: 0;
  bottom: 0;
}

/* Top, bottom and height */
.example5 {
  position: fixed;
  top: 0;
  bottom: 0;
  height: auto;
}

In both of these cases, both top and bottom values will be respected so the element will stretch to the full height of the viewport.

In the following example, a fixed-positioned element has been given top and bottom values as well as a height.

/* Height as a length */
.example6 {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100px;
}

In this cases, the element will be positioned at the top of the viewport with a height of 100px. The bottom value will be ignored.

Top, bottom, height and relative positioning

In the following example, a relatively-positioned element has been given top and bottom values.

/* Top, bottom */
.example7 {
  position: relative;
  top: 0;
  bottom: 0;
}

Regardless of whether a height has been specified, if top and bottom values have been specified, the bottom value is ignored.

Exercise 1: Use the top property

Open this HTML file in an editor:
exercises-start/exercise-210-01.html

Write a CSS rule to set the element with a class of example1 to position: absolute.

Also set the element with top: 50px.

/* Add styles here */
.example1 {
  position: absolute;
  top: 50px;
}

Write a second CSS rule to set the element with a class of example2 to position: fixed.

Also set the element with top: 100px.

/* Add styles here */
.example2 {
  position: fixed;
  top: 100px;
}

Write a third CSS rule to set the element with a class of example3 to position: relative.

Also set the element with top: 20px.

/* Add styles here */
.example3 {
  position: relative;
  top: 20px;
}

Write a fourth CSS rule to set the element with a class of example4 to position: sticky.

Also set the element with position: -webkit-sticky for Webkit browsers that do not support position: sticky.

As with all browser-specific values, the -webkit-sticky value should be placed above the native sticky value.

Finally, set the element with top: 0.

/* Add styles here */
.example4 {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

Check your work against the finished HTML file:
exercises-finished/exercise-210-01.html

2. Right

The right property helps to specify the horizontal position of a positioned element.

/* Right as a length */
p {
  position: absolute;
  right: 20px;
}

The effect of right depends on how the element is positioned.

Right and absolute positioning

With absolute positioning, the right property specifies the distance between the element’s right edge and the right edge of its containing block.

If no ancestors have positioning, the element will be positioned in relation to the initial containing block.

For example, setting right: 20px will move an absolutely positioned element 20px to the left of the right edge of its containing block.

Setting right: -20px will move an absolutely positioned element 20px to the right of the right edge of its containing block.

Setting right: 50% will move an absolutely positioned element to the left 50% of the width of the containing block, from its right edge.

Right and fixed positioning

With fixed positioning, the right property specifies the distance between the element’s right edge and the right edge of the viewport.

For example, setting right: 20px will move a fixed positioned element 20px to the left from the right edge of the viewport.

Right and relative positioning

With relative positioning, the right property specifies the distance the element’s right edge is moved away from its normal position.

For example, setting right: 20px will move a relatively positioned element 20px to the left of its normal position.

Right and static positioning

When position is set to static, the right property has no effect.

Which property wins?

There are times when three different properties are defined for a specific element: left, right and width.

There is a possibility that some of these properties may clash.

For example, left: 0 and right: 0 will stretch the element to the left and right of the containing block.

But what happens if there is also width: 200px? Which properties will be applied and which will be ignored?

Left, right, width and absolute positioning

In the following example, an absolutely-positioned element has been given left and right values, and either no width or width: auto.

/* Left, right */
.example1 {
  position: absolute;
  left: 0;
  right: 0;
}

/* Left, right and width */
.example2 {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
}

In both of these cases, both left and right values will be respected so the element will stretch to the full width of the containing block.

In the following example, an absolutely-positioned element has been given left and right values as well as a width.

/* Width as a length */
.example3 {
  position: absolute;
  left: 0;
  right: 0;
  width: 100px;
}

In this cases, the right value will be ignored. The element will be positioned at the left of the containing block with a width of 100px.

In cases where the direction of the document, or section of the document has the dir set to rtl (right to left), the left value would be ignored instead.

<!-- HTML markup -->
<div class="content" dir="rtl">
  ...
</div>

Left, right, width and fixed positioning

In the following example, a fixed-positioned element has been given left and right values, and either no width or width: auto.

/* Left, right */
.example4 {
  position: fixed;
  left: 0;
  right: 0;
}

/* Left, right and width */
.example5 {
  position: fixed;
  left: 0;
  right: 0;
  width: auto;
}

In both of these cases, both left and right values will be respected so the element will stretch to the full width of the viewport.

In the following example, a fixed-positioned element has been given left and right values as well as a width.

/* Width as a length */
.example6 {
  position: fixed;
  left: 0;
  right: 0;
  width: 100px;
}

In this cases, the element will be positioned at the left of the viewport with a width of 100px. The right value will be ignored.

Left, right, width and relative positioning

In the following example, a relatively-positioned element has been given left and right values.

/* Left, right */
.example7 {
  position: relative;
  left: 0;
  right: 0;
}

Regardless of whether a width has been specified, if left and right values have been specified, the right value is ignored.

In cases where the direction of the document, or section of the document has the dir set to rtl (right to left), the left value would be ignored instead.

<!-- HTML markup -->
<div class="content" dir="rtl">
  ...
</div>

Exercise 2: Use the right property

Open this HTML file in an editor:
exercises-start/exercise-210-02.html

Write a CSS rule to set the element with a class of example1 to position: absolute.

Also set the element with right: 50px.

/* Add styles here */
.example1 {
  position: absolute;
  right: 50px;
}

Write a second CSS rule to set the element with a class of example2 to position: fixed.

Also set the element with right: 100px.

/* Add styles here */
.example2 {
  position: fixed;
  right: 100px;
}

Write a third CSS rule to set the element with a class of example3 to position: relative.

Also set the element with right: 20px.

/* Add styles here */
.example3 {
  position: relative;
  right: 20px;
}

Check your work against the finished HTML file:
exercises-finished/exercise-210-02.html

3. Bottom

The bottom property helps to specify the vertical position of a positioned element.

/* Bottom */
p {
  position: absolute;
  bottom: 20px;
}

The effect of bottom depends on how the element is positioned.

Bottom and absolute positioning

With absolute positioning, the bottom property specifies the distance between the element’s bottom edge and the bottom edge of its containing block.

If no ancestors have positioning, the element will be positioned in relation to the initial containing block.

For example, setting bottom: 20px will move an absolutely positioned element 20px up from the bottom edge of its containing block.

Setting bottom: -20px will move an absolutely positioned element 20px down from the bottom edge of its containing block.

Setting bottom: 50% will move an absolutely positioned element up 50% of the height of the containing block, from its bottom edge.

Bottom and fixed positioning

With fixed positioning, the bottom property specifies the distance between the element’s bottom edge and the bottom edge of the viewport.

For example, setting bottom: 20px will move a fixed positioned element 20px up from the bottom edge of the viewport.

Bottom and relative positioning

With relative positioning, the bottom property specifies the distance the element’s bottom edge is moved away from its normal position.

For example, setting bottom: 20px will move a relatively positioned element 20px up from its normal position.

Bottom and static positioning

When position is set to static, the bottom property has no effect.

Which property wins?

There are times when three different properties are defined for a specific element: top, bottom and height.

There is a possibility that some of these properties may clash.

For example, top: 0 and bottom: 0 will stretch the element to the top and bottom of the containing block.

But what happens if there is also height: 200px? Which properties will be applied and which will be ignored?

Top, bottom, height and absolute positioning

In the following example, an absolutely-positioned element has been given top and bottom values, and either no height or height: auto.

/* Top, bottom */
.example1 {
  position: absolute;
  top: 0;
  bottom: 0;
}

/* Top, bottom and height */
.example2 {
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
}

In both of these cases, both top and bottom values will be respected so the element will stretch to the full height of the containing block.

In the following example, an absolutely-positioned element has been given top and bottom values as well as a height.

/* Height as a length */
.example3 {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100px;
}

In this cases, the element will be positioned at the top of the containing block with a height of 100px. The bottom value will be ignored.

Top, bottom, height and fixed positioning

In the following example, a fixed-positioned element has been given top and bottom values, and either no height or height: auto.

/* Top, bottom */
.example4 {
  position: fixed;
  top: 0;
  bottom: 0;
}

/* Top, bottom and height */
.example5 {
  position: fixed;
  top: 0;
  bottom: 0;
  height: auto;
}

In both of these cases, both top and bottom values will be respected so the element will stretch to the full height of the viewport.

In the following example, a fixed-positioned element has been given top and bottom values as well as a height.

/* Height as a length */
.example6 {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100px;
}

In this cases, the element will be positioned at the top of the viewport with a height of 100px. The bottom value will be ignored.

Top, bottom, height and relative positioning

In the following example, a relatively-positioned element has been given top and bottom values.

/* Top, bottom */
.example7 {
  position: relative;
  top: 0;
  bottom: 0;
}

Regardless of whether a height has been specified, if top and bottom values have been specified, the bottom value is ignored.

Exercise 3: Use the bottom property

Open this HTML file in an editor:
exercises-start/exercise-210-03.html

Write a CSS rule to set the element with a class of example1 to position: absolute.

Also set the element with bottom: 50px.

/* Add styles here */
.example1 {
  position: absolute;
  bottom: 50px;
}

Write a second CSS rule to set the element with a class of example2 to position: fixed.

Also set the element with bottom: 100px.

/* Add styles here */
.example2 {
  position: fixed;
  bottom: 100px;
}

Write a third CSS rule to set the element with a class of example3 to position: relative.

Also set the element with bottom: 20px.

/* Add styles here */
.example3 {
  position: relative;
  bottom: 20px;
}

Check your work against the finished HTML file:
exercises-finished/exercise-210-03.html

4. Left

The left property helps to specify the horizontal position of a positioned element.

/* Left as a length */
p {
  position: absolute;
  left: 20px;
}

The effect of left depends on how the element is positioned.

Left and absolute positioning

With absolute positioning, the left property specifies the distance between the element’s left edge and the left edge of its containing block.

If no ancestors have positioning, the element will be positioned in relation to the initial containing block.

For example, setting left: 20px will move an absolutely positioned element 20px to the right of the left edge of its containing block.

Setting left: -20px will move an absolutely positioned element 20px to the left of the left edge of its containing block.

Setting left: 50% will move an absolutely positioned element to the right 50% of the width of the containing block, from its left edge.

Left and fixed positioning

With fixed positioning, the left property specifies the distance between the element’s left edge and the left edge of the viewport.

For example, setting left: 20px will move a fixed positioned element 20px to the right from the left edge of the viewport.

Left and relative positioning

With relative positioning, the left property specifies the distance the element’s left edge is moved away from its normal position.

For example, setting left: 20px will move a relatively positioned element 20px to the right of its normal position.

Left and static positioning

When position is set to static, the left property has no effect.

Which property wins?

There are times when three different properties are defined for a specific element: left, right and width.

There is a possibility that some of these properties may clash.

For example, left: 0 and right: 0 will stretch the element to the left and right of the containing block.

But what happens if there is also width: 200px? Which properties will be applied and which will be ignored?

Left, right, width and absolute positioning

In the following example, an absolutely-positioned element has been given left and right values, and either no width or width: auto.

/* Left, right */
.example1 {
  position: absolute;
  left: 0;
  right: 0;
}

/* Left, right and width */
.example2 {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
}

In both of these cases, both left and right values will be respected so the element will stretch to the full width of the containing block.

In the following example, an absolutely-positioned element has been given left and right values as well as a width.

/* Width as a length */
.example3 {
  position: absolute;
  left: 0;
  right: 0;
  width: 100px;
}

In this cases, the right value will be ignored. The element will be positioned at the left of the containing block with a width of 100px.

In cases where the direction of the document, or section of the document has the dir set to rtl (right to left), the left value would be ignored instead.

<!-- HTML markup -->
<div class="content" dir="rtl">
  ...
</div>

Left, right, width and fixed positioning

In the following example, a fixed-positioned element has been given left and right values, and either no width or width: auto.

/* Left, right */
.example4 {
  position: fixed;
  left: 0;
  right: 0;
}

/* Left, right and width */
.example5 {
  position: fixed;
  left: 0;
  right: 0;
  width: auto;
}

In both of these cases, both left and right values will be respected so the element will stretch to the full width of the viewport.

In the following example, a fixed-positioned element has been given left and right values as well as a width.

/* Width as a length */
.example6 {
  position: fixed;
  left: 0;
  right: 0;
  width: 100px;
}

In this cases, the element will be positioned at the left of the viewport with a width of 100px. The right value will be ignored.

Left, right, width and relative positioning

In the following example, a relatively-positioned element has been given left and right values.

/* Left, right */
.example7 {
  position: relative;
  left: 0;
  right: 0;
}

Regardless of whether a width has been specified, if left and right values have been specified, the right value is ignored.

In cases where the direction of the document, or section of the document has the dir set to rtl (right to left), the left value would be ignored instead.

<!-- HTML markup -->
<div class="content" dir="rtl">
  ...
</div>

Exercise 4: Use the left property

Open this HTML file in an editor:
exercises-start/exercise-210-04.html

Write a CSS rule to set the element with a class of example1 to position: absolute.

Also set the element with left: 50px.

/* Add styles here */
.example1 {
  position: absolute;
  left: 50px;
}

Write a second CSS rule to set the element with a class of example2 to position: fixed.

Also set the element with left: 100px.

/* Add styles here */
.example2 {
  position: fixed;
  left: 100px;
}

Write a third CSS rule to set the element with a class of example3 to position: relative.

Also set the element with left: 20px.

/* Add styles here */
.example3 {
  position: relative;
  left: 20px;
}

Check your work against the finished HTML file:
exercises-finished/exercise-210-04.html

5. Values

The top, right, bottom and left properties can be defined using length values, percentage values, the auto keyword or the inherit keyword.

Length values

Length values must be a positive or negative number.

/* length values */
p { top: 3px; }
p { right: -3px; }

Length values can include any of the following length types:

/* Font-relative lengths */
p { top: .7cap; }
p { top: 1.2ch; }
p { top: .9em; }
p { top: 1.8ex; }
p { top: .9ic; }
p { top: 1.1lh; }
p { top: 1.5rem; }
p { top: .9rlh; }

/* Viewport-percentage lengths */
p { top: 1vh; }
p { top: 2vw; }
p { top: 3vi; }
p { top: 4vb; }
p { top: 5vmin; }
p { top: 6vmax; }

/* Absolute length units */
p { top: 14px; }
p { top: 10mm; }
p { top: 12q; }
p { top: 1cm; }
p { top: .25in; }
p { top: 12pt; }
p { top: 14pc; }

For absolutely positioned elements, length defines the distance that the element is moved away from its containing block.

For relatively positioned elements, length defines the distance that the element is moved away from its normal position.

Percentage values

Percentage values must be a positive or negative percentage number followed by the percent "%" sign.

Percentages define a percentage of the containing block’s width or height.

/* percentage values */
p { top: 10%; }
p { right: -10%; }

The auto keyword value

top: auto means that the position of the element is based on the bottom property.

right: auto means that the position of the element is based on the left property.

bottom: auto means that the position of the element is based on the top property.

left: auto means that the position of the element is based on the right property.

For relatively-positioned elements, if any of the opposite edges are also set to auto, the element is not moved at all.

/* auto value */
p { top: auto; }

The inherit keyword value

The inherit keyword specifies that the value is the same as the computed value from its parent element.

/* Keyword values */
p { top: inherit; }

Exercise 5: Use some different values

Open this HTML file in an editor:
exercises-start/exercise-210-05.html

Write a CSS rule to set the element with a class of example1 to left: 2em.

/* Add styles here */
.example1 {
  left: 2em;
}

Write a second CSS rule to set the element with a class of example2 to left: -1em.

/* Add styles here */
.example2 {
  left: -1em;
}

Write a third CSS rule to set the element with a class of example3 to left: 15%.

/* Add styles here */
.example3 {
  left: 15%;
}

Check your work against the finished HTML file:
exercises-finished/exercise-210-05.html