CSS bottom Property

The CSS bottom property works on the vertical position of a positioned element. The CSS bottom property has no effect on non-positioned elements.

Syntax:

bottom: auto|length;

auto (default) - lets the browser calculate the bottom edge position.

length - settles the bottom edge position in px, cm, %, etc.

Example:

<!doctype html> <html> <head> <style>    .frame {         border: 3px solid #333;     }   .one, .two, .three {     width: 100px;     height: 50px;     position: relative;     background-color: #e9c46a;     display: inline-block;     }          .one {         bottom: 0px;     }         .two {         bottom:10px;     }          .three {         bottom: -10px;     }      </style> </head>  <body>     <div class="frame">     <div class="one">1</div>     <div class="two">2</div>     <div class="three">3</div>     </div> </body> </html>

Output:



1
2
3


Enjoy coding!

Read also:

CSS position Property

CSS display Property