У меня есть этот html-код:
<div id="CldrFromSpan" messageHint="From">
<input type="text" id="CldrFrom" runat="server" clientidmode="Static" placeholder="From" style="width:15%" />
</div>
#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. Я получил это:
Мне нужно, чтобы сообщение было точно выше ввода. вы можете помочь пелазе?
Это должно дать вам представление о том, как вы могли это сделать. Трюк дает положение внешнего элемента 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>
#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;
}
bottom: 0px
, так как всплывающее окно закрывает окно. Попробуйте использовать: скрипку .