将一个元素定位在另一个元素的填充之上

Question

Fiddle: 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>

代码输出如下：

Answer 1

你能设置负边距来使这个工作吗？

例如

.tooltip {
  position: absolute;
 margin-top: -10px;
}

Answer 2

How do I position the tooltip on top of it's parent's padding? Is that even possible?

绝对有可能。

您对 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> 中嵌套块元素不是好的做法。

Answer 3

织法： http://kodeweave.sourceforge.net/editor/#ab8e7d11a9e2412863824bf0e3176caf

我可能错了，但最后我检查了在 SPAN 元素中嵌入 DIV 不是 valid HTML

第一个 DIV 元素默认是 display block. Meaning it behaves like a paragraph (minus the padding) and always is added on a new line. So instead of using a DIV use a SPAN element which is display inline. Remember DRY!

现在关于你的问题...

How do I position the tooltip on top of it's parent's padding?

您可以使用 position absolute, position fixed, or position relative. (In your case absolute or relative 来执行此操作）

这是一个简单的例子。（我使用的是 Normalize CSS Reset，所以 UI 在所有浏览器上看起来都一样。）

.tooltip {
  position: relative;
  top: 8px;
}

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>

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

Answer 4

您可以将 position:relative 与 z-index 结合使用，在任何您想要的填充或元素上的任何地方获得工具提示..

我已经在单独的 html 上实现了您的代码，因为我没有您的 html 结构。

您可以更改 .topltip{top:__px} 以根据需要垂直调整工具提示。

<html>
    <head>
        <style>
            span {
              width: 100px;
            }
            .input-group {
              padding-right: 20px;
            }  
            .tooltip {
              position: relative;
              top: -10px;
              display: table-cell;
              z-index: 2;
            }
            .input-group{
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <span class="input-group">

          <input type="text" value="firstname" />

          <div class='tooltip placeholder'>^</div>

        </span>

        <span class="input-group">
          <input type="text" value="lastname" />
        </span>

    </body>
</html>

将一个元素定位在另一个元素的填充之上

Position an element over another one's padding

html

css

css-position

absolute