Почему не абсолютное позиционирование внутри относительной работы?

Я полный новичок в веб-программировании, поэтому вот моя проблема:

Это то, что у меня есть прямо сейчас: http://jsfiddle.net/H2V7W/5/

<div>
    <ul>
        <li>1</li>
    </ul>

    <ol>
        <li>a</li>
    </ol>
</div>


div{
    position: relative;
    border: 1px blue solid;
   }

ul, ol {
    border: 1px red solid;
       }

Но как только я добавляю "положение: абсолютное" к двум спискам, высота элемента div уменьшается до 1px, чего я не хочу. http://jsfiddle.net/H2V7W/6/

div{
    position: relative;
    border: 1px blue solid;
   }

ul, ol {
    border: 1px red solid;
    position: absolute;
       }

Почему это происходит, что два листинга, похоже, полностью выпрыгнули из div? Я думал, что у меня будет "полный контроль", если я сделаю абсолютное позиционирование внутри родственника?