css父子级都设置定位如何撑开父级

最近做项目，遇到一个问题，父级设置的相对定位，子级设置绝对定位，如果不给父级设置高度，它的高度为0，如何撑开父级d的高度呢？？？

目前我的解决办法是子级也换成绝对定位，完美解决：

<style>
.wra{
    position: relative;
}
.box{
    position: relative;
    width:100px;
    height:200px;
    background:#444;
}
</style>
<div class="wra">
    <div class="box"></div>
</div>
<p>123</p>

补充：

父子都有定位，如何让子元素自适应父元素的宽高

.father
    position:relative
    width:10px
    height:100px
    border:1px solid red
    .son
        width:100%
        height:100%
        background #000
        display:inline-block
        position:relative

这种操作经常用来写自适应的网页。

最近因为个人博客需要，自己写了一个简单的loading动画加载组件，效果如下：

外层一个旋转的父级，里边有8个子元素。试想一下，如果子元素不能够自适应父元素的宽高，当loading图标的大小发生改变时，你还要去调整每一个子元素的大小？并且旋转中心还要去不断调试！子元素自适应父元素宽高一切问题都会解决，loading大小会随着父元素宽高而改变，旋转中心不需要改变！！！

html：

<div class="father">
    <span class="son"></span>
    <span class="son"></span>
    <span class="son"></span>
    <span class="son"></span>
    <span class="son"></span>
    <span class="son"></span>
    <span class="son"></span>
    <span class="son"></span>
</div>

css（css用的是stylus，下边代码可能不会高亮！whats your Problem？）

.father
    position:relative
    width:2px
    height:8px
    border-radius:6px
    animation:run 1.5s linear infinite
    transform-origin:bottom center
    @keyframes run
        to
            transform:rotate(0deg)
        from 
            transform:rotate(360deg)
    .son
        width:100%
        height:100%
        background #000
        display:inline-block
        position:absolute
    .son:nth-of-type(1)
        transform:translate(0,-5px)
    .son:nth-of-type(2)
        transform:rotate(45deg) translate(0,-5px)
    .son:nth-of-type(3)
        transform:rotate(90deg) translate(0,-5px)
    .son:nth-of-type(4)
        transform:rotate(135deg) translate(0,-5px)
    .son:nth-of-type(5)
        transform:rotate(180deg) translate(0,-5px)
    .son:nth-of-type(6)
        transform:rotate(225deg) translate(0,-5px)
    .son:nth-of-type(7)
        transform:rotate(-90deg) translate(0,-5px)
    .son:nth-of-type(8)
        transform:rotate(-45deg) translate(0,-5px)