绝对定位元素的相对定位答案

【问题标题】：Relative positioning for an absolute positioned element绝对定位元素的相对定位
【发布时间】：2021-08-18 18:22:29
【问题描述】：

我有一个绝对定位的<div>。现在这个<div> 有子元素，它们将相对于父<div> 绝对定位。如果我将父 <div> 的位置设置为相对以使其子元素保持在原位，则父 <div> 将脱离其实际位置。

如何解决这个问题？我需要使父 <div> 元素绝对定位，相对于其绝对的子元素。

html:

<div class="tooltip" style="right:200px">
   Hover over me<span class="tooltiptext">Tooltip text</span>
</div>

css:

.tooltip {
  position: relative;
  display: inline-block
}

.tooltip .tooltiptext {
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
  background-color: black;
  color: #fff;
}

【问题讨论】：

请更新您的问题，以便在minimal, complete, and verifiable example 中显示您的相关代码。如果人们想尝试解决问题，就可以省去写出和/或猜测您的 html 和 css 是什么的麻烦。
How do I ask a good question? -> 添加minimal reproducible example。请在提交之前（或至少在提交之后）校对您的问题，因为那时您应该已经看到所有 <div>s 都“消失”了
您所解释的内容应该已经有效。绝对子元素将相对于最近的定位父元素定位，其中包括 absolute 定位的父元素，父元素不必是 relative 定位的
jsfiddle.net/xfd5aegj/1

标签： html css

【解决方案1】：

.tooltip.tooltiptext

应该是

.tooltip .tooltiptext

没有空格表示具有多个类名的相同元素，例如

class="tooltip tooltiptext"

这不是你所拥有的

空格表示父子关系，这就是你所拥有的，即-

<div class="tooltip">
   <span class="tooltiptext">...</span>
</div>

编辑...我看到问题已被另一个用户编辑为现在显示.tooltip .tooltiptext，所以我不知道原始海报在他们的代码中实际上是什么，但原始问题显示.tooptip.tooltiptext

【讨论】：

抱歉打错了。我也在做同样的事情，编辑了问题