CSS bottom

The CSS bottom property is used to define the vertical position of an element, from bottom edge. This property only effects on positioned element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: relative; width: 220px; height: 120px; border: 2px solid red;}
      .b{position: absolute; bottom: 10px; color: blue;}
   </style>
</head>
<body>

   <div class="a">
      <div class="b">fresherearth</div>
   </div>

</body>
</html>

Output

fresherearth

In above example, with the help of bottom: 10px, the element moved up by 10px from bottom edge.

Note - The position property defines the position category of an element.

CSS bottom Syntax

The syntax of bottom property in CSS, is:

bottom: x;

The value of x should be any of the following:

Length - Used to move an element by some custom length like 12px, 2cm etc. from bottom edge
auto - Used to allow browser to define the bottom position of an element automatically. This is the default value
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS bottom Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: fixed; bottom: 20px; background-color: red;
         color: whitesmoke; padding: 8px;}
      .b{position: relative; width: 260px; height: 220px;
         background-color: blue; color: whitesmoke;
         bottom: -20px; padding: 8px;}
      .c{position: absolute; bottom: 20px; background-color: green;
         color: whitesmoke; padding: 8px;}
   </style>
</head>
<body>

   <div class="a">position: fixed; bottom: 60px</div>
   <div class="b">position: relative; bottom: -20px
      <div class="c">position: absolute; bottom: 20px</div>
   </div>

</body>
</html>

The output produced by above example is:

Note - Giving negative value to bottom property, will move an element down from bottom edge. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: relative; width: 260px; height: 120px; padding: 8px;
         background-color: gray; color: whitesmoke;}
      .x{position: absolute; bottom: 40px; background-color: green;
         color: whitesmoke; padding: 8px;}
      .y{position: absolute; bottom: -40px; background-color: blue;
         color: whitesmoke; padding: 8px;}
   </style>
</head>
<body>

   <div class="a">
      <div class="x">position: absolute; bottom: 40px</div>
      <div class="y">position: absolute; bottom: -40px</div>
   </div>

</body>
</html>

Output

position: absolute; bottom: 40px

position: absolute; bottom: -40px

CSS Online Test

« Previous Tutorial Next Tutorial »