bottom#

#Introduction

The bottom CSS property participates in specifying the vertical position. For more information, please refer to property position.

The effect of bottom depends on how the element is positioned (i.e., the value of the position property):

• When position is set to absolute or fixed, the bottom property specifies the distance between the outer edge of the element's bottom margin and the outer edge of the containing block's bottom padding.

• When position is set to relative, the bottom property specifies the distance the element's bottom edge is moved above its normal position.

When both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. In all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored.

#Examples

css-apisrc/bottom/App.tsx

Preview

#Syntax

/* <length> values */
bottom: 3px;
bottom: 2rpx;
bottom: 2.4em;
bottom: 3rem;

bottom: 10%;

/* Keyword value */
bottom: auto;

/* calc */
bottom: calc(1px + 1px);

#Values

• <length>

  A negative, null, or positive <length> that represents:

  • for absolutely positioned elements, the distance to the bottom edge of the containing block.
  • for relatively positioned elements, the distance that the element is moved above its normal position.

• <percentage>

  Defines the height as a percentage of the containing block's height.

• auto

  Default value.

#Formal definition

#Formal syntax

bottom =
  auto                |
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

#Compatibility