position issue, shy container2 yellow position is there? why not buttom?

 <style type="text/css">
  .container{height:100px; width:100px;border: solid 1px black;line-height:100px;text-align:center;font-weight:bold;float:left;}
  .outContainer{height:410px;width:110px;background-color:green;position:relative;top:100px;left:100px}
  .container1{background-color:grey;}
  .container2{background-color:yellow;position:absolute;buttom:0px;right:10px;}
  .container3{background-color:pink;}
 </style>

<div class="outContainer">
<div class="container1 container"> 
  BOX1
</div>
<div class="container2 container"> 
  BOX2
</div>
<div class="container3 container"> 
  BOX3
</div>

position issue, shy container2 yellow position is there? why not but开发者_如何学运维tom?

buttom should be changed to bottom (bottom, spelled with a O instead of a u).