oursolutionarchitectoursolutionarchitect
  • Selected Reading
  • Q&A

CSS - bottom

Description

The bottom property defines an offset of the bottom edge of an absolutely positioned element from the bottom edge of its positioning context, or the vertical distance which a relatively positioned element will be displaced.

Possible Values

  • length − A fixed distance from the bottom of the positioning context.

  • percent − Some percentage of the height of the positioning context, assuming that the height of the context has been set explicitly. If not, then a percentage value for bottom is treated as though it were auto.

  • auto − Default. Lets the browser calculate the bottom position.

Applies to

All the HTML positioned element.

DOM Syntax

object.style.bottom = "2px";

Example

Here is the example which shows effect of this property −

Live Demo 
<html>
   <head>
   </head>

   <body>
      <p style = "position:absolute; bottom:100px;">
         This line will be positioned 100px above from the bottom edge of this window.
      </p>
   </body>
</html>

It will produce the following result −