Top - Property CSS

Description of top, right, bottom et left properties.

These four properties define the position of an element when that element is positioned. An element is said to be "positioned" when it is taken out of the normal flow of the display, that is when its property position has a value other than static (see the property position).

top, right, bottom, and left define the space between the edge of the reference element or the viewport and the corresponding margin of the positioned element, as shown in the diagram below:

Last positioned element or viewportt

The two properties that act in the same direction (left and right, for example) can therefore come into conflict. Here’s how this is resolved:

• If left and right are set and the width of the element (width) is auto, the element is sized to satisfy both the values given to left and right.
• If left and right are set and the width of the element is also fixed, the right property is ignored.

A similar rule can be found in the vertical direction:

• If top and bottom are set and the element's height is auto, the element is sized to satisfy the given values for top and bottom.
• If top and bottom are set and the height of the element is also imposed by the height property, the value of bottom is ignored.

The shorthand property inset.

A property allowing the four positioning values to be set in a single declaration has been defined: inset. Its name does not match CSS conventions, as the name of a shorthand property is generally the root of the names of the grouped properties. Margin, for example, is the shorthand property for margin-top, margin-right, margin-bottom, and margin-left.
Since the properties top, right, bottom, and left have no common part in their names, the usual rule could not be applied.

But what's even stranger is that properties whose names start with inset have also been defined, but they are logical properties, meaning they act according to the writing mode of the language (see below). Refer to the description of the property inset for more details.

Language support.

When the positioning of the element needs to be based on the language, it is better to use the following logical properties:

• inset-block-start: equivalent to top for latin languages.
• inset-inline-start: equivalent to left for latin languages.
• inset-block-end: equivalent to bottom for latin languages.
• inset-inline-end: equivalent to right for latin languages.

And the following two short-hand properties:

• inset-block: short-hand property for inset-block-start and inset-block-end.
• inset-inline: short-hand property for inset-inline-start and inset-inline-end.

Attention! There is also a property inset, but it is not the summarized property of the four above because it is a physical property, not a logical one.

Syntaxes for top,right,bottom and left.

• top: auto; right: auto; bottom: auto; left: auto;

  The browser determines the element's position by itself. In general, the element stays in the position it would have had in static mode.

• top: 10px; right: 10px; bottom: 10px; left: 10px;

  The position of the element is set according to the specified values. It is not at all necessary to define a value for all four properties.

  The value can be positive or negative, as long as it does not lead to an impossibility. It must be followed by a unit of measurement (see CSS dimension units).

  Percentages are evaluated relative to the dimensions of the parent block. Percentages on left and right are evaluated relative to its width, while those on top and bottom are evaluated relative to its height.

• top: initial; (auto) top: inherit; top: revert; top: revertLayer; top: unset;

  right: initial; (auto) right: inherit; right: revert; right: revertLayer; right: unset;

  bottom: initial; (auto) bottom: inherit; bottom: revert; bottom: revertLayer; bottom: unset;

  left: initial; (auto) left: inherit; left: revert; left: revertLayer; left: unset;

  For more information, refer to the presentation pages of these different values: initial, inherit, revert, revert-layer, unset.

Animation of top, right, bottom and left.

These four properties are frequently used in animations. They are very smooth (animation of a dimension in pixels).
In our example, the element is positioned as relative, and the properties left and top are animated.

Simulator with these four properties.

The simulator acts on the blue element whose position has been set to absolute and whose dimensions (width and height) are auto. Its parent has a relative position without any specific positioning instructions. By changing the values for the positioning properties below, you will see the element move across the screen, and possibly change dimensions. Of course, it may seem to leave its parent, but the parent still serves as the reference for positioning.

Compatibility.

The four physical properties are correctly handled by all browsers. Their logical equivalents are not recognized by Internet Explorer  , but this browser is no longer used.

1

top bottom
right left
properties

2

inset
property
 

3

inset...
logical properties
 

Estimated overall support.

96%

94%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

History of the properties top, right, bottom, and left.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

  Regarding top. Introduction of the possibility of positioning an element (position property) and properties defining its position: top, right, bottom and left.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Logical Properties and Values Level 1

  Regarding top. Introduction of logical properties inset... to position an element taking into account the writing mode of the language used.
  

  May 18, 2017

  Working Draft.

  

  

  

• CSS Positioned Layout Module Level 3

  Regarding top. No change regarding theses properties.
  

  February 07, 2012

  Working Draft.

  

  

  

See also, about positioning.

Properties related to positioning (different from static) are grouped in the CSS Positioned Layout Module. The following properties are also described in this same module:

Properties:

Bottom

Defines the space between the bottom of the element (if positioned) and the bottom of its parent.

inset

Sets the position of the element when it is positioned other than static. Short hand for top, right, bottom and left.

inset-block

Defines the position of a positioned element in the block direction. Shorthand for inset-block-start and inset-block-end.

inset-block-end

For a positioned element, sets the location of the end side of the block.

inset-block-start

For a positioned element, sets the location of the edge on the start side of the block.

inset-inline

Defines the position of a positioned element in the inline direction. Shorthand for inset-inline-start and inset-inline-end.

inset-inline-end

On a positioned element, sets the location of the edge at the end of the line.

inset-inline-start

On a positioned element, sets the location of the edge at the starting of the line.

Left

For a positioned element, defines the space between the left edge of the element and the left edge of the reference element.

⚠

overlay

Determine if a positioned element should be displayed above others.

position

Changes the positioning of an element, for example to make it fixed in relation to the page.

Right

For a positioned element, defines the space between the right edge of the element and the right edge of the reference element.

Top

For a positioned element, defines the space between the top of the element and the top of the reference element (positioned parent or viewport).

z-index

Defines on which layer an element should be displayed (top, bottom). Especially useful for positioned elements.