Question

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

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

span元素位于div元素（.main＆gt; div＆gt; span）

下

span元素的位置绝对是为了使文本居中（Food，Health）。

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

根据我的理解，绝对定位的元素（.main＆gt; div＆gt; span）应相对于其相对或绝对定位的容器（.main＆gt; div）定位。

为什么元素重叠？不仅是span元素，还有div元素（相对定位）重叠。

我试图自己解决这个问题，但无法解决问题。

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

＆＃13;

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%);
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

Answer 2

你的理解是正确的，虽然在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>

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

2 个答案: