Question

如何将工具提示置于其父级填充之上？这甚至可能吗？

这是我的片段：

＆＃13;

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

＆＃13;

{ "Select...", "Before 1996", "1996", "1997", "1998", "1999", "2000" }

＆＃13;

这就是代码输出的内容：

Answer 1

如何将工具提示置于其父级填充之上？这甚至可能吗？

绝对有可能。

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

在这里试试：

＆＃13;

.input-group {
  float: left;
  padding-right: 20px;
  background: gray;
  position: relative;
}  

.tooltip {
  position: absolute;
  top: 0;
  right: 0;
  background: cyan;
}

＆＃13;

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

＆＃13;

修改：我已将您的代码重构为<span>中的嵌套块元素，这不是一个好习惯。

Answer 2

您可以设置负余量以使其有效吗？

例如

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

Answer 3

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

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

首先，DIV元素默认为display block。意味着它的行为类似于段落（减去填充）并始终添加到新行上。因此，不使用DIV而是使用display inline的SPAN元素。记住DRY！

现在你的问题......

如何将工具提示置于其父级填充之上？

您可以使用position absolute，position fixed或position relative执行此操作。（在您的情况下，absolute或relative将是您想要使用的）

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

将元素放在另一个填充上

4 个答案: