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

要以紧凑的方式在不浪费空间的情况下将一个子div置于另一个之上，可以使用CSS的定位属性和层叠顺序来实现。以下是一种常见的方法：

首先，确保父div和子div都具有相对定位（relative）或绝对定位（absolute）的属性。
对于父div，设置其position属性为相对定位（relative）。
对于子div，设置其position属性为绝对定位（absolute），并通过top、left、right、bottom属性来调整其位置。
使用z-index属性来控制子div的层叠顺序。较大的z-index值将使元素置于较小的z-index值之上。

下面是一个示例代码：

<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>

在上述示例中，父div具有相对定位，子div和兄弟div都具有绝对定位。子div通过top和left属性相对于父div进行定位，并且具有较大的z-index值，因此它会被置于兄弟div之上。

这种方法可以在不浪费空间的情况下将子div置于另一个之上，并且可以根据实际需求进行调整。