Как заставить элемент с положением: абсолютное изменение размера родительского div?

Question

Легкий вопрос. Я просто хочу понять логику. Почему элементы с позицией: absolute (и float: left тоже) не занимают место, как позиция: относительная? И как заставить элемент с позицией: абсолютный для изменения размера родительского div?

View DEMO

Мне нужно, чтобы понять это условие, чтобы решить некоторые проблемы.

<style> 
    .relative, 
    .absolute { 
     height: auto; 
     width: 200px; 
     border: 1px solid black; 
     margin: 10px; 
    } 

.relative svg { 
     position: relative; 
} 

.absolute svg { 
     position: absolute; 
} 
</style> 


<!-- The height:auto works! --> 
<div class="relative"> 
    <svg width="50" height="50"> 
     <rect width="50" height="50" style="fill:rgb(255,0,0)" /> 
    </svg> 
</div> 

<!-- The height:auto don't works --> 
<div class="absolute"> 
    <svg width="50" height="50"> 
     <rect width="50" height="50" style="fill:rgb(0,0,255)" /> 
    </svg> 
</div> 

Answer 1

position: absolute нарушает нормальное ...

Нормальный поток документа, как ваши элементы стека один на верхней друг друга, сверху вниз, в том порядке, в котором они введите в свою разметку.

В отличие от статических и относительных значений, абсолютно нормальный элемент удаляется из нормального потока. Это означает, что вы можете поместить его в любом месте, и он не повлияет на какой-либо другой элемент в .

Источник: http://alistapart.com/article/css-positioning-101

CSS SPEC: http://www.w3.org/TR/CSS21/visuren.html