Javascript Reference - HTML DOM Style bottom Property

The bottom property sets or gets the bottom position of a positioned element.

Browser Support


`bottom`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the bottom property:

var v = object.style.bottom

Set the bottom property:

object.style.bottom=auto|length|%|initial|inherit

Property Values

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

Technical Details

Default Value:	auto
Return Value:	A string representing the bottom position of a positioned element
CSS Version	CSS2

Example 1

The following code shows how to set the bottom position of a <button> element.


<!DOCTYPE html>
<html>
<head>
<style>
#myBtn {<!--from w  w w . j  a  v a2s . co m-->
    position: absolute;
}
</style>
</head>
<body>

<button type="button" id="myBtn" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myBtn").style.bottom = "100px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to set the bottom position of a <div> element:


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from  ww w .  j a va 2  s  . co  m-->
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: coral;
    color: white;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">myDIV</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.bottom = "10px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to use negative values to set the bottom position of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from  ww  w.  j  a  v a  2  s. c  o  m-->
    border: 1px solid #FF0000;
    position: relative;
}
</style>
</head>
<body>

<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myDiv").style.bottom = "-100px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to get the bottom position of a <div> element.


<!DOCTYPE html>
<html>
<body>
<!--from   ww  w  .ja  va2  s. c o  m-->
<div id="myDiv" style="position:absolute;bottom:0px;">This is a div element.</div>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.bottom);
}
</script>

</body>
</html>

The code above is rendered as follows: