绝对定位的父div如何作为子绝对元素定位基准且不改变自身位置

核心原理 #

CSS中只要元素的position属性不是默认的static，都可以作为子元素绝对定位的参照基准，本身就是absolute定位的父元素完全满足这个要求，不需要额外改成relative。

问题根源 #

你当前给.tooltip设置了position: relative，覆盖了原本需要的absolute定位，导致你行内声明的right: 200px失效，才会出现父元素位置偏移的问题。

修复后代码 #

CSS部分 #

.tooltip {
  /* 保留原需求的absolute定位，无需改为relative */
  position: absolute;
  display: inline-block;
}

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

HTML部分无需修改 #

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

效果说明 #

修改后父元素.tooltip保持原有absolute定位，既可以沿用right:200px的设置保持原本位置，又可以作为子元素的绝对定位参照，子元素的偏移属性会相对于父元素计算，完全匹配需求。

内容的提问来源于stack exchange，提问作者Yaditya