绝对位置div中的文本是重叠的。
在下面的代码片段中，div元素(.main > div)相对定位并向左浮动。
由于相对定位，div元素(.main > div)被放置在彼此的旁边。
span元素位于div元素下(.main > div > span)
span元素的位置是绝对的，以便以文本(食品、健康)为中心。
但我面临的问题是，文本是重叠的。
根据我的理解，绝对定位元素(.main > div > span)应该相对于其相对或绝对定位的容器(.main > div)进行定位。
那么为什么元素是重叠的。不仅是span元素，还包括div元素(相对定位)重叠。
我试图自己解决这个问题，但没能解决问题。
我寻找类似的StackOverflow问题，但他们没有提供解决方案。
html, body {
width: 100%;
height: 100%;
}
.main {
height: 5%;
border: 1px solid thistle;
}
.main > div {
position: relative;
float: left;
height: 100%;
border: 1px solid black;
}
.main > div > span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="main">
<div><span>Food</span></div>
<div><span>Health</span></div>
</div>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2016-03-07 16:09:12
您的理解是正确的，尽管在这个div被浮动的情况下，它们将折叠成0的宽度，因为div没有任何正常的流动内容，因此您的绝对span重叠。
在下面的示例中，我给出了div的宽度，现在您可以看到它的工作方式符合您的预期。
html, body {
width: 100%;
height: 100%;
}
.main {
height: 5%;
border: 1px solid thistle;
}
.main > div {
position: relative;
float: left;
height: 100%;
border: 1px solid black;
width: 100px; /* added a width */
}
.main > div > span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="main">
<div><span>Food</span></div>
<div><span>Health</span></div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2016-03-07 15:59:11
原因是您的每个position:absolute;元素都从DOM的本机流中删除，并且绝对定位到它们的父元素。因为他们都有相同的位置，他们被放置在对方的顶部。使用position:relative定位元素相对于它们在DOM中的本机位置。
https://stackoverflow.com/questions/35848112
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号