Html 绝对定位div中的文本重叠

在下面的代码段中，div元素（.main>div）相对定位并向左浮动

由于相对定位，div元素（.main>div）彼此相邻放置

span元素位于div元素（.main>div>span）下

span元素的位置绝对适合文本（食品、健康）的中心位置

但我面临的问题是，文本重叠

根据我的理解，绝对定位的元素（.main>div>span）应该相对于其相对或绝对定位的容器（.main>div）进行定位

那么为什么元素重叠呢。不仅span图元，而且div图元（相对定位）也重叠

我试图自己解决这个问题，但没能解决问题

我搜索了类似的StackOverflow问题，但它们没有提供解决方案

html，正文{
宽度：100%；
身高：100%；
}
梅因先生{
身高：5%；
边界：1px实心蓟；
}
.main>div{
位置：相对位置；
浮动：左；
身高：100%；
边框：1px纯黑；
}
.main>div>span{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}

JS-Bin
食物
健康

原因是您的每个

位置：绝对元素从DOM的本机流中删除，并绝对定位到其父元素。因为它们都有相同的定位，所以它们被放置在彼此的顶部。使用
position:relative
来相对于元素在DOM中的本机位置定位元素。
您的理解是正确的，尽管在这种情况下
div
是浮动的，它们将折叠为0的宽度，因为没有任何
div
具有任何正常的流动内容，因此，您的绝对
span
重叠

在下面的示例中，我给了
div
一个宽度，现在您可以看到它是如何工作的


html，正文{
宽度：100%；
身高：100%；
}
梅因先生{
身高：5%；
边界：1px实心蓟；
}
.main>div{
位置：相对位置；
浮动：左；
身高：100%；
边框：1px纯黑；
宽度：100px；/*增加了一个宽度*/
}
.main>div>span{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}

JS-Bin
食物
健康
DOM没有“本机流”。您所指的是CSS定位元素的“正常流”，其中DOM在元素的文档节点顺序之外不起任何作用。