bottom - HTML CSS CSS Property

HTML CSS examples for CSS Property:bottom

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. bottom

Description

The bottom CSS property sets offset for the bottom edge of the positioned element, relative to the bottom of element's box or browser window.

For absolutely positioned elements, the bottom property sets how far the bottom edge of the element's box is offset above the bottom edge of its containing block.

For relatively positioned elements, the bottom property sets the offset with respect to the bottom edge of the box itself.

The following table summarizes the bottom Property.

Item Value
Default value: auto
Applies to:Positioned elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


bottom:     length | percentage | auto | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length a length value in px, pt, cm, em, etc. Negative length values are allowed.
percentage The percentage is calculated with respect to the height of the element's containing block. Negative percentage values are allowed.
auto The browser calculates the bottom edge position. Default value.
initialSets this property to its default value.
inherittake the value of its parent element bottom property.

The example below shows the bottom property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS bottom property</title>
  <style type="text/css">
    p {<!-- www.  j  a va 2s  .c  o m-->
    width: 200px;
        position: absolute;
        bottom: 150px;
        padding: 20px;
        font: bold 18px sans-serif;
        background: #9acd32;
    }
</style>
 </head>
 <body>
  <p>Play with the bottom property value to see how it works.</p>
 </body>
</html>

Related Tutorials