Absolute Offsets

Without absolute offsets which is the default values when declaring an absolute positioned element, the top is set to 0 but, height 0.

by fezec

HTML

<div id="container">
<div id="redblock">
    <div id="yellowblock">a</div>
</div>
    <p>hgfhgfhgfjhgfhgfjhgf</br>jhgkjhg</p>
</div>

CSS

#container{
border:1px solid blue;
    
position:relative;    

height:200px;
/*height:auto;*/    /*10.6.7 'Auto' heights for block formatting context roots*/
    
}
#redblock {
   position: absolute;
   
   top: 0;
   bottom:0;
   height:auto;  /* three important properties when dealing with absolute heights*/
    
   left: auto;
   background-color: red;
   width: 100px;
   border:1px solid green;
}

#yellowblock {  
  
   background-color:yellow;
   color: red;
   width: 50px;
   height: 75%;
}