html - 将元素放置在另一个人的填充上

小提琴：https://jsfiddle.net/kn7g54j1/2/

如何将工具提示放置在父母的填充上方？那有可能吗？

这是我的片段：

    span {
  width: 100px;
}
.input-group {
  padding-right: 20px;
}
.tooltip {
  position: absolute;
}

<div class="input-group">
  <input type="text" value="firstname" />
  <div class='tooltip placeholder'>^</div>
</div>
<div class="input-group">
  <input type="text" value="lastname" />
</div>

这是代码输出的内容：

最佳答案

如何将工具提示放置在父母的填充上方？那有可能吗？


绝对有可能。

您对position: absolute有正确的想法。要点是从文档流中删除工具提示，否则，它将在父元素的内容区域中，而不是在父元素的填充上。

在这里尝试：

.input-group {
  float: left;
  padding-right: 20px;
  background: gray;
  position: relative;
}

.tooltip {
  position: absolute;
  top: 0;
  right: 0;
  background: cyan;
}

<div class="input-group">
  <input type="text" placeholder="First Name" />
  <div class='tooltip placeholder'>^</div>
</div>
<div class="input-group">
  <input type="text" placeholder="Last Name" />
</div>

编辑：我重构了您的代码，因为<span>中的嵌套块元素不是一个好习惯。

关于html - 将元素放置在另一个人的填充上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37336542/