css - 在不使用 px 的情况下在右侧对齐的堆叠/覆盖 div

Question

我使用一个 div 作为帮助按钮。按钮使用 float 右对齐。
现在，当“popHelp”弹出时，它在左侧对齐。
如何在右侧对齐它？
** @click="popHelp"隐藏和显示帮助

<div class="help3d">
  <div
    @click="popHelp">
    <span>{{ helpLabel }}</span>
  </div>
  <div v-if="showHelp" id="popHelp">
    {{ helpL1 }}
  </div>
</div>


.help3d {
  display: inline-block;
  float: right;
  cursor: pointer;
  border: 1 solid #000;
  background-color: #c88;
  position: static;
}
#popHelp {
  position: absolute;
  display: block;
  right: auto;
  top: auto;
  z-index: 20;
  background-color: #844;
  color: #fff;
  text-align: left;
}

如果我尝试使用 relative，popHelp 会替换它下面的任何 div。我想让它覆盖它

Answer 1

如果这个 CSS 解决了你的问题，请告诉我

.help3d {
  display: inline-block;
  float: right;
  cursor: pointer;
  border: 1 solid #000;
  background-color: #c88;
  position: relative;
}

#popHelp {
  position: absolute;
  display: block;
  right: auto;
  top: auto;
  z-index: 20;
  background-color: #844;
  color: #fff;
  text-align: left;
  right: 0;
}