Html 让dl元素识别其dt元素内容

我有两个CSS代码：

dl.set {
    position: relative;
}

dl.set dt {
    position: absolute;
    border: 1px solid #000;
}

以及以下HTML：

<dl class="set">
    <dt><img src="images1.jpg" /></dt>
    <dt><img src="images2.jpg" /></dt>
    <dt><img src="images3.jpg" /></dt>
</dl>

我的目标是安排图像在不同的位置相互重叠。所以我想我能做的就是利用

绝对位置的
顶部
和
底部
属性来安排它们的位置

但是，
dl
元素无法识别其中的
dt
元素内容。
dl
元素框的高度保持为
0px
。我试图给
dl
元素一个
overflow:hidden
来清除浮动，但它也不起作用。相反，它会将
dt
元素剪掉

如何让
dl
元素根据
dt
元素内容的大小来识别和扩展其大小，同时保持它们的位置
相对
和
绝对
关系（因为我需要对元素进行不同的定位）？
绝对定位
将元素移出正常流程。因此，您的
dl
可以说是空的，
dt
位于另一层

如果将
dt
定位为绝对，
dl
将永远不会扩展到
dt
的大小（自动）。您需要重新构建HTML/CSS或提出javascript解决方案。
绝对定位！=你有没有一个例子来看待你的问题？也许还有其他方法可以做到这一点。@Paul我用一个HTML示例编辑了我的问题，说明了我正在努力实现的目标。我的目标是在
dl
元素中排列图像，以便在不同的位置彼此重叠。所以我想我能做的就是利用绝对位置的顶部和底部属性来安排它们的位置。但当然，
dl
元素没有检测到它的绝对dt元素。