CSS bottom

CSS bottom property decides the bottom offset (bottom edge of element offset from bottom edge of container) for positioned elements. An element is considered positioned if its position property has value other than static.

CSS property bottom

1. Property bottom can be applied to positioned elements (fixed, relative, absolute)
2. For absolute element the offset is relative to nearest positioned container.
3. For relative element the offset is relative to the element’s normal position itself.
4. In case value is specified as percentage, it is percentage of containing block width.
5. Negative values are ok.

Example – css bottom property

<style type="text/css">
.container {
  position: relative;
  background-color: gray;
  width:200px; height: 100px;
}
.boxwithoffset {
 position: absolute;
 background-color:lightblue;
 width: 80px;
 left:0 ; bottom: 0;
}
</style>
<div class="container">
  <div>regular text</div>
  <div class="boxwithoffset">box with bottom offset</div>
</div>

Related

• CSS left
• CSS top
• CSS right