CSS - bottom Property

The bottom property in CSS is used to set the bottom position of a positioned element. It specifies the distance between the bottom edge of the element and the bottom edge of its containing element.

Based on the value of the position property, the effect of bottom property, is determined.

Position value	Bottom property
absolute or fixed	Specifies the distance between element's bottom edge's outer margin amd the inner border of the container's bottom edge.
relative	Specifies the distance the element's bottom edge is moved above its normal position.
sticky	Used to compute the sticky-constraint rectangle.
static	No effect on the elements.

Both top and bottom distances are respected, when both top and bottom values are specified, position is set to absolute or fixed , and height is either 100% or auto.

The top value takes precedence and the bottom value is ignored, when height is constrained or position is set to relative.

Possible Values

<length> − Can specify a negative, null or positive value.
<percentage> − Percentage of the container's height.
auto − Default value. Browser calculates the bottom position.

Applies to

All the HTML positioned element.

DOM Syntax

object.style.bottom = "2px";

CSS bottom - With Absolute Position

Here is an example with position:absolute and bottom having different values (auto, percent, length) −

<html>
<head>
<style>      
   div.blockbottompostion {
   bottom: 10%;
   background-color: yellow;
   position: absolute;
   height: 100px;
   border: 3px solid rgb(12, 5, 62);
   }
</style>
</head>
<body>
   <h1>The bottom Property</h1>
   <p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
   </p>
   <p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
   </p>
   <div class="blockbottompostion">Position:absolute bottom:10%</div>
</body>
</html>

CSS bottom - With Relative Position

Here is an example with position:relative and bottom having different values (auto, percent, length)−

<html>
<head>
<style>      
   div.blockbottompostion {
   bottom: 10%;
   background-color: yellow;
   position: relative;
   height: 100px;
   border: 3px solid rgb(12, 5, 62);
   }
</style>
</head>
<body>
   <h1>The bottom Property</h1>
   <p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
   </p>
   <p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
   </p>
   <div class="blockbottompostion">Position:relative bottom:10%</div>
</body>
</html>

CSS bottom - With Fixed Position

Here is an example with position:fixed and bottom having different values (auto, percent, length)−

<html>
<head>
<style>      
   div.blockbottompostion {
   bottom: 10%;
   background-color: yellow;
   position: fixed;
   height: 100px;
   border: 3px solid rgb(12, 5, 62);
   }
</style>
</head>
<body>
   <h1>The bottom Property</h1>
   <p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
   </p>
   <p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
   </p>
   <div class="blockbottompostion">Position:fixed bottom:10%</div>
</body>
</html>

CSS bottom - With Sticky Position

Here is an example with position:sticky and bottom having different values (auto, percent, length)−

<html>
<head>
<style>      
   div.blockbottompostion {
   bottom: 10%;
   background-color: yellow;
   position: sticky;
   height: 100px;
   border: 3px solid rgb(12, 5, 62);
   }
</style>
</head>
<body>
   <h1>The bottom Property</h1>
   <p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
   </p>
   <p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
   </p>
   <div class="blockbottompostion">Position:sticky bottom:10%</div>
</body>
</html>

CSS bottom - With Static Position

Here is an example with position:static and bottom having different values (auto, percent, length)−

<html>
<head>
<style>      
   div.blockbottompostion {
   bottom: 10%;
   background-color: yellow;
   position: static;
   height: 100px;
   border: 3px solid rgb(12, 5, 62);
   }
</style>
</head>
<body>
   <h1>The bottom Property</h1>
   <p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
   </p>
   <p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
   </p>
   <div class="blockbottompostion">Position:static bottom:10%</div>
</body>
</html>

Print Page