绝对定位的div中的文本重叠 [英] Text in absolutely positioned div is overlapping
问题描述
在下面的代码片段中，div元素（.main> div）相对放置并向左浮动。
由于相对位置的原因，div元素（.main> div）并排放置。
span元素位于div元素下方（.main> div> span）
span元素的绝对位置使文本（食物，健康）居中。
但是我面临的问题是文字是重叠的。
根据我的理解，绝对位置元素（.main> div> span）应相对于其相对位置或绝对位置的容器（ .main> div）。
为什么元素重叠。不仅span元素重叠，而且div元素（相对放置）也重叠。
我试图自己解决这个问题，但无法解决问题。
我搜索了类似的StackOverflow问题，但没有提供解决方案。
html，body {width：100％;高度：100％;}。main {高度：5％;边框：1px实心蓟；}。main> div {position：relative;向左飘浮;高度：100％;边框：1px纯黑色；}。main> div>跨度{位置：绝对；最高：50％；转换：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>食物< / span> / div < div< span>健康< / span> / div < / div>< / body>< / html>
您的理解是正确的，尽管在这种情况下 div 是浮动的，它们会折叠为0的宽度，因为 div 都不具有任何正常的流动内容，因此，绝对 span 的重叠部分。
在下面的示例中，我给出了 div 的宽度，现在您可以看到它的工作原理。
html，body {width：100％;高度：100％;}。main {高度：5％;边框：1px实心蓟；}。main> div {position：relative;向左飘浮;高度：100％;边框：1px纯黑色；宽度：100px； / *添加了一个宽度* /}。main> div>跨度{位置：绝对；最高：50％；转换：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>食物< / span> / div < div< span>健康< / span> / div < / div>< / body>< / html>
In the below code snippet, the div elements (.main > div) are relatively positioned and are floated left.
Because of the relative positioning, the div elements (.main > div) are placed next to each other.
The span elements are under the div elements (.main > div > span)
The span elements are positioned absolutely so as to centre the text (Food, Health).
But the issue I am facing is that the text is overlapping.
As per my understanding, an absolutely positioned element (.main > div > span) should be positioned with respect to its relatively or absolutely positioned container (.main > div).
So why are elements overlapping. Not just the span elements, but also the div elements (which are relatively positioned) overlapping.
I tried to figure this issue by myself, but couldn't figure out the problem.
I searched for similar StackOverflow questions, but they did not provide the solution.
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>
Your understanding is correct, though in this case where the div's is floated, they will collapse into a width of 0, as none of the div's has any normal flowing content, hence your absolute span's overlap.
In below sample I gave the div's a width, and now you can see it works how you expected.
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>
这篇关于绝对定位的div中的文本重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
