CSS bottom Property

Description

The bottom property sets the position of the lower edge of the content of an element without taking into account the thickness of the frames and indents. The coordinate count depends on the position property, it usually takes the value relative (relative position) or absolute (absolute position).

Initial value

auto

Applies to

Positioned elements

Inherited

No

Media

Visual

Computed value

If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'

Animatable

Yes

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.bottom

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

Desktop
5	12	1	1	6	1
Tablets / Mobile
≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 20th October 2019