html - Absolute positioning inside relative? Why doesn't this work? -

i'm complete beginner @ webprogramming here's problem:

this have right now: 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;        } 

but add "position: absolute" 2 listings height of div-element decreases 1px not want. http://jsfiddle.net/h2v7w/6/

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

why happening 2 listings seem have jumped out of div? thought have "full control" once absolute positioning inside relative?

according spec,

absolute
box's position (and possibly size) specified 'top', 'right', 'bottom', , 'left' properties. these properties specify offsets respect box's containing block. absolutely positioned boxes taken out of normal flow. means have no impact on layout of later siblings. also, though absolutely positioned boxes have margins, not collapse other margins.

also see mdn article.