bottom

Description

bottom property defines the offset between the bottom edge of a positioned element and the bottom of its containing block.

ItemValue
Initial value auto
Inherited No.
Version CSS2
JavaScript syntax object.style.bottom="50px"
Applies to Positioned elements (position other than static).

Syntax and Property Values


bottom: length | percentage | auto | inherit

The property values are listed in the following table.

Value Description
auto browser does the calculation. Default value
length Sets bottom in px, cm, etc. Negative values are allowed
% Sets bottom position in % of containing element. Negative values are allowed
inherit Inherit the bottom property from the parent element

Example


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div,p {<!--from   w w  w .j a  v a  2 s .c  om-->
  margin: 10px;
  padding: 10px;
  border: 1px solid gray;
}

.pos {
  position: relative;
  bottom: -20px;
}


</style>
</head>

<body>
<div> 
    <p class="pos">Positioned</p> 
</div> 
</body>
</html>

Click to view the demo

The code above generates the following result.

bottom




















Home »
  HTML CSS »
    HTML CSS Reference »




HTML Tag Reference
CSS Reference
CSS Selector Reference
Encoding Reference