绝对定位div中的文本重叠

在下面的代码片段中，div元素（.main> div）相对定位并向左浮动。绝对定位div中的文本重叠

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

跨度元件是div元素下（。主要> DIV>跨度）

跨度元件被定位绝对以便居中文本（食品，健康）。

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

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

那么为什么元素重叠。不仅是跨度元素，还有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>

来源

2016-03-07 vrn

你的理解是正确的，但在这种情况下div的是浮动的，他们会坍缩成的宽度为0，因为没有div的“S有任何正常流动的内容，因此你绝对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>

来源

2016-03-07 16:09:12 LGSon

的原因是，每个position:absolute;元素从DOM的原生流中除去，并定位绝对是他们的父元素。由于它们具有相同的定位，所以它们被放置在彼此的顶部。使用position:relative将元素相对于其在DOM中的原生位置进行定位。

来源

2016-03-07 15:59:11

的DOM没有 “本地流量”。您所指的是CSS定位元素的“正常流程”，其中DOM不会超出元素的文档节点顺序。 https://drafts.csswg.org/css2/visuren.html#normal-flow – Rob

绝对定位div中的文本重叠

回答

相关问题