如何以紧凑的方式在不浪费空间的情况下将子div一个置于另一个之上？

<style>
    .parent {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #ccc;
    }

    .child {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: #f00;
        z-index: 1;
    }

    .sibling {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: #00f;
        z-index: 0;
    }
</style>

<div class="parent">
    <div class="child"></div>
    <div class="sibling"></div>
</div>