绝对定位的 div 中的文本重叠答案

【问题标题】：Text in absolutely positioned div is overlapping绝对定位的 div 中的文本重叠
【发布时间】：2016-03-08 00:40:14
【问题描述】：

在下面的代码sn-p中，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>

【问题讨论】：

标签： html css

【解决方案1】：

您的理解是正确的，尽管在这种情况下，div 是浮动的，它们将折叠成 0 的宽度，因为 div 没有任何正常的流动内容，因此您的绝对 @ 987654323@的重叠。

在下面的示例中，我给了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>

【讨论】：

【解决方案2】：

原因是您的每个 position:absolute; 元素都从 DOM 的本机流程中移除，并绝对定位到它们的父元素。由于它们都具有相同的位置，因此它们被放置在彼此之上。使用position:relative 来定位元素相对于它们在DOM 中的原生位置。

【讨论】：

DOM 没有“本机流”。您所指的是 CSS 定位元素的“正常流程”，其中 DOM 在元素的文档节点顺序之外没有任何作用。 drafts.csswg.org/css2/visuren.html#normal-flow