CSS Property: bottom
[this page | pdf | back links]
The CSS (CSS2) bottom property sets, for absolutely
positioned elements, the bottom edge of an element relative to the corresponding
edge of its nearest positioned ancestor. If such an element has no positioned
ancestors then it uses the document body and moves along with page scrolling. A
‘positioned’ element is one whose position is anything other than static.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
length
|
Sets edge position in CSS length units. Can be
negative
|
|
%
|
Sets edge position in %
of containing element. Can be negative
|
|
auto
|
(default value).
Browser calculates edge position
|
|
Default Value:
|
auto
|
|
JavaScript syntax:
|
e.g. object.style.bottom="10px"
|
|
Inherited:
|
No
|
|
Animatable:
|
Yes
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div.parent {width: 250px; height: 80px; border: thin solid green; position: relative;}
div.x1 {width: 200px; height: 40px; border: thin solid red;}
div.x2 {width: 200px; height: 40px; border: thin solid red; position: absolute; bottom: 5px}
</style>
</head>
<body>
<div class="parent">
<div class="x1">Element with default properties</div>
</div><br>
<div class="parent">
<div class="x2">Element with CSS property set using HTML</div>
</div><br>
<div class="parent">
<div id="x3">Element with CSS property set using JavaScript</div>
</div>
<script>
var x = document.getElementById("x3");
x.style.width = "200px";
x.style.height = "40px";
x.style.border = "thin solid red";
x.style.position = "absolute";
x.style.bottom = "5px";
</script
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBottom() {
var x = document.createElement("DIV"); x.style.bottom = "5px"; return (window.getComputedStyle(x, null).bottom == "5px");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties