如何在此代码中使div高于输入

Question

我有这个HTML代码：

HTML

<div id="CldrFromSpan" messageHint="From">
    <input type="text" id="CldrFrom" runat="server" clientidmode="Static" placeholder="From" style="width:15%"  />
</div>

CSS

#CldrFromSpan {
    display:inline;
}

#CldrFromSpan:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(messageHint);
    padding: 5px 15px;
    position: relative;
    z-index: 98;
    width: 220px;
}

当我将鼠标悬停在那个div上时我明白了：

我需要消息正好在输入之上。你能帮助pelase吗？

Here is the fiddle

Answer 1

这可以让您了解如何做到这一点。诀窍是给出外部元素position:relative;和内部元素position:absolute;。

具有绝对位置的子元素将被定位为具有position: relative;的下一个父元素的绝对元素，在这种情况下，输入将被设置为左：0px;上：-30px;来自<div>

<div id="CldrFromSpan" messageHint="From">
    <input type="text" id="CldrFrom" runat="server" clientidmode="Static" placeholder="From" style="width:15%"  />
</div>

Fiddle

#CldrFromSpan {
    position:relative;
    margin-top:40px;
    width:100%;
    display:inline-block;
}

#CldrFromSpan:hover:after{
    position: absolute;
    top: -30px;
    left:0px;

    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    color: #fff;
    content: attr(messageHint);
    padding: 5px 15px;

    z-index: 98;
    width: 220px;
}