bottom aligns the bottom side of an absolute element to the bottom side of its container : bottom « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. bottom

bottom aligns the bottom side of an absolute element to the bottom side of its container

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .container {
  position: relative;
  background: black;
}

* .box {
  position: absolute;
  overflow: auto;
  visibility: visible;
  z-index: 1;
  bottom: 20px;
  width: 220px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}

* .before {
    z-index: 2;
  width: 100px;
  height: 400px;
  left: 400px;
  right: auto;
  top: 100px;
  bottom: auto;
    background: yellow;
}

</style>
</head>
<body>


<div class="container"> 
    <div>BEFORE</div> 
    <div class="before">ABSOLUTE BEFORE</div> 
    <div class="box">this is a test. this is a test. </div> 

</div> 
</body>

</html>








Related examples in the same category

1.'bottom' Example
2.Use bottom to offset the bottom of an element from the bottom.
3.Bottom auto
4.Absolute Outside Top Right with 100% bottom
5.Position layer
6.horizontally stretching content with top, right and left
7.Bottom always
8.positioning and sizing
9.Absolute to left and bottom
10.Bottom-right Absolute positioned element
11.Bottom-left Absolute positioned element
12.Absolute offset