为什么相对工作内部没有绝对定位？

Question

I'm a complete beginner at webprogramming so here's my problem:

This what I have right now. However, as soon as I add position: absolute to the two listings the height of the div-element decreases to 1px which is what I do not want. http://jsfiddle.net/H2V7W/6/

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

 <div> <ul> <li>1</li> </ul> <ol> <li>a</li> </ol> </div> 

Why is this happening that the two listings seem to have jumped out completely of div?

I thought that I would have "full control" once I do absolute positioning inside relative?

Answer 1

According to the spec ,

absolute
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

Also see this MDN article .