Bottom

We will learn about CSS bottom property in this chapter.

The CSS bottom property defines the bottom position of an element in combination with the position property.

When the position property is set to static, the bottom property do not apply.

CSS Syntax

bottom: auto | length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
	   div{
      	   	background-color:orange;
		height:200px;
		position:relative;
             }
	   p{
 	   	color:#ffffff;
	   }
           .bottom{
                position: absolute;
                bottom: 0;
           }
      </style>
   </head>
   <body>

	<div> 
	   <p>Some text.</p>
	   <p class="bottom">Text with the bottom property.</p>
       </div>

   </body>
</html>

Also we can use negative values.

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
	   div{
      	   	background-color:orange;
		height:200px;
		position:relative;
             }
	   p{
 	   	color:#ffffff;
	   }
           .bottom{
                position: absolute;
                bottom: -15px;
           }
      </style>
   </head>
   <body>

	<div> 
	   <p>Some text.</p>
	   <p class="bottom">Text with the bottom property.</p>
       </div>

   </body>
</html>

Property Values

Value Descriptions
auto When we use this, the browser will set the bottom edge position. It is the default value of this property.
length It sets the bottom edge position with px, cm etc. and we can use negative values.
% It sets the bottom edge position with % of containing element. We can use negative values.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.