CSS bottom Property

CSS bottom Property

This property defines the y (vertical) coordinate for a positioned element, relative to the bottom of the enclosing object or browser window.

Syntax -

bottom: length | percentage | auto | inherit

Now we will see the values with their descriptions -

Value	Description
auto	The default value, auto, places the object where it normally would be in the document order. For relative position, this will likely be treated as 0. For absolute and fixed positioning, it will calculate a value based upon other set properties, particularly top.
*length*	can be specified in the standard units of length, such as inches (in) and so on, but is nearly always set in pixels (px).
%	percentage corresponds to a percentage of the containing object’s dimensions.
inherit	Inherits this property from its parent element.

Now we will see Example

Example -

<!DOCTYPE html>
<html>
<head>
<style>
.father {
position: relative;
height: 150px;
border: 3px solid #f52f78;
}

.one {
position: absolute;
width: 50%;
bottom: 10px;
border: 3px solid #f5c72f;
}

.two {
position: relative;
width: 50%;
bottom: 5px;
border: 3px solid #f5c72f;
}

.three {
position: fixed;
width: 50%;
bottom: 10px;
border: 3px solid #f5c72f;
}

.four {
position: sticky;
width: 50%;
bottom: 10px;
border: 3px solid #f5c72f;
}
</style>
</head>
<body>

<h1>The bottom Property</h1>
<h2>Change the width of father and see -</h2>

<div class="father">Herer is the parent div
<div class="one"><strong>This is div inside absolute</div>
</div>
<br>

<div class="father">This is a parent div
<div class="two"><strong>position: relative</div>
</div>
<br>

<div class="three"><strong>This is a fixed position element</div>

<div class="father">This element has position fixed
<div class="four"><strong>This is a sticky element</strong></div>
</div>

</body>
</html>