CSS bottom Property

Description

The bottom CSS property is used to set the distance between the bottom edge of an element and the bottom edge of its containing element. It is often employed in conjunction with the position property, which determines the positioning context for the element. When an element's position is set to "absolute" or "fixed," you can use the "bottom" property to specify how far the element should be positioned from the bottom of its containing element. This property is particularly useful for creating fixed or sticky footer elements on web pages or for precise control over the vertical positioning of elements within a layout.

Initial value
auto
Applies to
Positioned elements
Inherited
No
Computed value
If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'
Animatable
Yes
JavaScript syntax
object.style.bottom

Interactive Demo

I am absolutely positioned.
The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

bottom: auto | <length> | <percentage> 

Values

  • <length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
  • <percentage>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.
  • autoDefault position, according to the regular HTML layout of the page.

Example

<p><span data-title="This is Lorem Ipsum Text">Lorem ipsum</span>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
p { 
   background: #e2edc1; 
   padding: 10px; 
   position: fixed; 
   bottom: 10px; 
} 
[data-title] { 
   position: relative; 
} 
[data-title]:hover::before { 
   position: absolute; 
   content: attr(data-title); 
   bottom: 15px; 
   background: rgba(0, 113, 181, 0.6); 
   color: #fff; 
   padding: 10px; 
   width: 200px; 
} 

Browser Support

The following table will show you the current browser support for the CSS bottom property.

Desktop
Edge Chrome Firefox Opera Safari
121161
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184141137

Last updated by CSSPortal on: 1st January 2024